如何获取ngx-bootstrap模态框组件引用并订阅其变更事件？

我来帮你搞定这个问题！在ngx-bootstrap的模态框体系里，其实已经内置了获取组件实例的方式，刚好能解决你没法订阅内部EventEmitter的困扰。

核心思路 #

this.modalService.show()方法执行后会返回一个BsModalRef对象，这个对象的content属性就是你传入的ListModalComponent的实例——哪怕模态框还没显示在页面上，这个实例已经被创建出来了，直接用它就能订阅组件里的事件。

具体实现步骤 #

1. 获取模态框引用并订阅事件
   在你app.component.ts的第17行附近，修改代码如下：

   // 调用show方法，保存返回的BsModalRef实例
   const modalRef = this.modalService.show(ListModalComponent, <你的配置选项>);
   
   // 通过modalRef.content拿到组件实例，直接订阅EventEmitter
   modalRef.content.yourChangeEvent.subscribe((eventData) => {
     // 这里处理模态框内部的变更逻辑
     console.log('收到模态框的变更数据：', eventData);
     // 比如更新父组件的数据、执行其他业务操作等
   });
   

2. 确保组件的EventEmitter是公共属性
   在你的ListModalComponent里，要把EventEmitter声明为public（默认是public，但显式声明更清晰），这样外部才能访问：

   import { Component, Output, EventEmitter } from '@angular/core';
   
   @Component({
     // 组件配置
   })
   export class ListModalComponent {
     // 声明用于传递变更事件的EventEmitter
     @Output() yourChangeEvent = new EventEmitter<any>();
     
     // 模态框内部触发事件的方法
     onInternalChange(data: any) {
       this.yourChangeEvent.emit(data);
     }
   }
   

关键说明 #

你不用担心“模态框显示前组件不存在”的问题，因为modalService.show()在调用的瞬间就完成了组件的实例化，content属性会立刻指向这个实例，订阅操作完全可以提前执行，等模态框内部触发事件时，父组件就能收到通知啦。

内容的提问来源于stack exchange，提问作者mark