在Angular中使用ngx-bootstrap modal模态框

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].personName
        this.needApplicantId = result[0].userCenterId;
        this.needApplicantName = result[0].personName
      }
    });
  }

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

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

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