bootstarp 中存在modal 模块，也称之为模态框

使用方法也是较为简单：
首先看一下ngx-bootstrap的官方网站：点击进入 若卡顿请采用科学上网

基本用法

注入模块，建议在全局进行注入

// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { ModalModule } from 'ngx-bootstrap';@NgModule({imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

具体引入

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';@Component({selector: 'demo-modal-service-static',templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {modalRef: BsModalRef;constructor(private modalService: BsModalService) {}openModal(template: TemplateRef<any>) {this.modalRef = this.modalService.show(template);}
}

实践操作

record.component.html

  <div class="col-md-6"><div class="info-span">费用申请人<span style="color: red;">*</span></div><input class="info-select" [(ngModel)]="feeAddInfo.fees.applicantId" (click)="find()"></div>

record.component.ts

find() {const modalRef: BsModalRef = this.modalService.show(SelectApplicantComponent, {class: "popup_width580",});(<SelectApplicantComponent>modalRef.content).onClose.subscribe((result) => {debugger//模态框关闭监听    回读数据if (result) {this.feeAddInfo.fees.applicantId = result[0].personNamethis.needApplicantId = result[0].userCenterId;this.needApplicantName = result[0].personName}});}

以popup_width580的样式进行SelectApplicantComponent组件的展示

SelectApplicant.component.ts
提交时对this.selectedOrders使result可以监听到。

submit() {this.onClose.next(this.selectedOrders)}