ngx-bootstrap拆分模态为独立组件后如何配置自定义CSS类

你将模态内容抽取为独立组件后，完全不需要跨文件导入查找对应的#template模板引用。ngx-bootstrap 的 ModalService 本身就原生支持「直接传入独立组件类」打开模态的模式，自定义CSS类的配置逻辑和之前传入本地ng-template的写法完全一致，没有额外适配成本。

具体实现步骤 #

• 完成独立模态组件的基础改造

  • 正常编写独立模态组件的模板与逻辑：内部保留原来的头部、内容区、关闭按钮结构，在组件构造函数中注入ModalDirective，用来调用hide()方法实现关闭逻辑即可。
  • 基于NgModule的项目开发时，需要把这个独立模态组件添加到模块的entryComponents声明中；如果是Standalone组件模式，直接在组件的元数据声明中关联即可，不需要额外的跨文件模板引用导出操作。

• 修改触发组件的打开方法
  不需要在触发组件的HTML中写本地的#template引用，也不需要在TS中导入独立组件里的模板ID，直接把独立组件类作为第一个参数传给modalService.show()方法，自定义CSS类和原来一样写在第二个配置参数中即可，示例代码如下：

  openModalWithClass() {
    this.modalRef = this.modalService.show(
      // 直接传入独立的模态组件类，替代原来的本地template引用
      YourExtractedModalComponent,
      // 自定义CSS类的配置和官方文档的写法完全一致，没有改动
      Object.assign({}, { class: 'gray modal-lg' })
    );
  }
  

常见配套用法说明 #

如果你的独立模态组件需要接收外部传入的动态数据，依然可以在配置对象中通过initialState字段传递，和模板模式下的用法完全通用：

this.modalRef = this.modalService.show(
  YourExtractedModalComponent,
  {
    class: 'gray modal-lg', // 自定义类照常生效
    initialState: {
      // 这里可以给独立组件传入需要的业务参数
      modalHeaderText: '自定义标题',
      longContent: 你的长列表/长文本内容
    }
  }
)

注意：完全不需要为了获取独立组件内部的#template引用，做跨文件导出、跨组件查询ViewChild这类复杂操作——直接传入组件类的打开方式，本来就是框架为「模态内容拆分独立组件」场景设计的原生能力，自定义类的配置在两种打开模式下是完全打通的。

内容的提问来源于stack exchange，提问作者Yoël Zerbib