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

旧城等待， 2022-11-06 14:52 265阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

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

### 基本用法 ###

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

// 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)
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20221023/34e67e4acc284f7998e17b0fd621b39a.png
[Link 1]: https://valor-software.com/ngx-bootstrap/#/