Angular 12 使用ngx-bootstrap跨组件打开模态框找不到组件报错问询

API 探路者

2026-10-3

报错原因

你自行实现的模态框组件类名为ChildModalComponent，但调用modalService.show()方法时传入的是示例代码的占位类名ModalContentComponent，你的项目中并未定义该类，因此运行时抛出找不到名称的错误。
额外冗余问题：你写的<child-modal #childModal ></child-modal>模板代码无意义，通过BsModalService动态创建的模态框不需要预先在父组件模板中声明标签。

解决步骤

替换调用时传入的组件类名，修改MyComponent内的openModalWithComponent方法：

public openModalWithComponent() {
  /* 传入你自己实现的模态框组件类名 */
  this.bsModalRef = this.modalService.show(ChildModalComponent);
}

如果ChildModalComponent和MyComponent不在同一个TS文件中，需要在MyComponent所在文件顶部导入该组件：

import { ChildModalComponent } from './你的模态框组件文件路径';

在所属Angular模块中完成模态框组件注册
打开你对应的模块文件（如app.module.ts），确保相关配置正确：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModalModule } from 'ngx-bootstrap/modal';
import { MyComponent } from './my.component';
import { ChildModalComponent } from './child-modal.component';

@NgModule({
  imports: [
    BrowserModule,
    ModalModule.forRoot() // 必须导入ngx-bootstrap的模态框模块
  ],
  declarations: [
    MyComponent,
    ChildModalComponent // 声明模态框组件
  ],
  // Angular 8以下非IVY环境必须添加以下配置，高版本可忽略
  entryComponents: [ChildModalComponent]
})
export class AppModule { }