作者：ll等待花开的大婶_oO_107 | 来源：互联网 | 2023-09-24 17:30
模态框是项目中经常会用到的一个公共功能，通常会被用左提示框或者扩展选项框。下面，我用一个小例子来简单展示实现模态框功能的过程：1、为项目加包：ngaddngx-bootstrap2
模态框是项目中经常会用到的一个公共功能，通常会被用左提示框或者扩展选项框。
下面，我用一个小例子来简单展示实现模态框功能的过程：
1、为项目加包：
ng add ngx-bootstrap
2、在xxx.module.ts(模块.ts文件)中引入：
...
import { ModalModule } from "ngx-bootstrap/modal";
...
@NgModule({
imports: [
...
ModalModule.forRoot(),
...
]
})
...
3、创建一个模块框公共组件：
//.ts部分
import { Component } from ‘@angular/core‘;
import { BsModalRef } from ‘ngx-bootstrap‘;
@Component({
selector: ‘response-modal‘,
templateUrl: ‘./response-modal.html‘
})
export class ResponseModalService {
public header: string;
public body: string;
constructor(public modalRef: BsModalRef
) {}
}
<style>
.centerize {
text-align: center;
}
style>
<div class="container-fluid">
<div class="modal-header">
<h5>{{ header }}h5>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body" style="white-space: pre-line;">
{{ body }}
div>
<div class="centerize">
<button type="button" text-aling="center" class="btn btn-primary mr-2" (click)="modalRef.hide()">OKbutton>
div>
<p>
div>
4、在xxx.page.ts(模版.ts文件)中引入并，并调用：
import { BsModalRef, BsModalService } from "ngx-bootstrap";//引入模态框资源对象及服务对象
import { ResponseModalService } from "src/app/shared/component/response-modal";//引入上面创建好的模态框组件
...
public modalRef: BsModalRef;
...
constructor(
private modalService: BsModalService,
...
) {
...
}
...
public openUpdateNotification(message: string): void {
this.modalRef = this.modalService.show(ResponseModalService, {//初始化一个之前创建好的模态框组件
initialState: {
header: "",
body: message
},
class: "modal-lg"
});
}
5、在合适位置调用打开模态框的方法openUpdateNotification即可。
![Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案](https://img6.php1.cn/3cdc5/9b0d/243/f27d40b3b7e4b51b.png)
京公网安备 11010802041100号