标签：modalRef bootstrap result modal import ngx

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

标签：modalRef,bootstrap,result,modal,import,ngx
来源： https://blog.csdn.net/qq_43277404/article/details/114627951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。