ng-bootstrap: NullInjectorError: No provider for NgbModalRef 问题

Posted 2023-02-19

【中文标题】ng-bootstrap: NullInjectorError: No provider for NgbModalRef 问题

【英文标题】：ng-bootstrap: NullInjectorError: No provider for NgbModalRef issue

【发布时间】：2021-06-01 05:05:17

【问题描述】：

我正在尝试将 NgbModalRef 类添加到我的组件中，但我不知道它为什么拒绝注入它。 我有 Angular 10.2.1、bootstrap 4.5.3 和 ng-bootstrap 8.0.4，我在 app.module 文件中添加了 NgbModule 并像这样导入了类：

modal.ts

import  NgbModal, NgbModalRef  from '@ng-bootstrap/ng-bootstrap';

 constructor(private modalService: NgbModal, private modalRefService: NgbModalRef)

模态中的 HTML

<button (click)="modalRefService.close()">Close</button>

我尝试创建一个函数然后调用该类但结果相同。

当我尝试打开我的模式时，我得到：

ERROR NullInjectorError: R3InjectorError(AppModule)[NgbModalRef -> NgbModalRef -> NgbModalRef]:    NullInjectorError: No provider for NgbModalRef!

app.module.ts

@NgModule(
  declarations: [
    AppComponent,
    ModalComponent
  ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        NgbModule
      ],

【问题讨论】：

错误提示您需要将NgbModalRef 添加到您的应用程序的提供者列表中

我已经尝试将它添加到 app.module 的提供程序中，但它没有解决问题。

【参考方案1】：

组件是否在 app.module 中声明？如果不是，则必须在声明该组件的模块中导入 NgbModalRef。

【讨论】：

我在app.module中声明了组件

【参考方案2】：

我找到了解决方案，我删除了 NgbModalRef 并在依赖项中添加了 NgbActiveModal

 constructor(
    private modalService: NgbModal, private activeModalService: NgbActiveModal ) 
 

然后我把函数移到了 TS 文件中

 closeModal() 
    this.activeModalService.close();