注入的NgbModal返回undefined，Angular模态框调用异常求助

可能的原因及解决办法 #

1. 未在模块中导入NgbModalModule #

NgbModal属于@ng-bootstrap/ng-bootstrap库，必须在组件所属的模块（如AppModule或功能模块）中导入对应模块才能正常使用：

import { NgModule } from '@angular/core';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { MainComponent } from './main.component';
import { ModalComponent } from './modal.component';

@NgModule({
  declarations: [MainComponent, ModalComponent],
  imports: [
    // 其他已导入模块
    NgbModalModule
  ]
})
export class AppModule { }

2. 触发openModal时this上下文丢失 #

如果按钮绑定方式导致this指向错误（比如将openModal作为回调传递时未绑定上下文），会出现this.modalService为undefined的情况，可通过两种方式修复：

• 方式一：用箭头函数定义openModal

export class MainComponent {
  constructor(private modalService: NgbModal) {}

  openModal = (newData: string) => {
    const modalRef = this.modalService.open(ModalComponent)
    modalRef.componentInstance.data = newData
  }
}

• 方式二：在构造函数中绑定this

export class MainComponent {
  constructor(private modalService: NgbModal) {
    this.openModal = this.openModal.bind(this);
  }

  openModal(newData: string) {
    const modalRef = this.modalService.open(ModalComponent)
    modalRef.componentInstance.data = newData
  }
}

3. 组件未通过Angular依赖注入实例化 #

如果手动通过new MainComponent()创建组件实例，而非由Angular框架负责实例化，依赖注入的modalService不会被正常注入，导致其为undefined。确保组件是通过模板声明、路由配置等Angular标准方式创建的。

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