NG-bootstrap 模态组件没有提供程序错误答案

【问题标题】：NG-bootstrap Modal Component no provider errorNG-bootstrap 模态组件没有提供程序错误
【发布时间】：2021-06-08 17:43:00
【问题描述】：

我是 Angular 2 的 ng-bootstrap 库；特别是我在看：Components as content。我试图将示例代码合并到我的项目中，但收效甚微。我从浏览器调试器得到的错误是

没有 NgbModal 的提供者，我在示例代码中没有看到任何内容。我不确定在哪里可以设置一个 angular 2 项目来进行演示。我想做的只是将他们的示例代码实现到ng new <projectname> 将使用modile.component.ts 和app.component.ts 文件生成的标准项目中。

app.module.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent }        from './app.component';
import { NgbdModalComponent, NgbdModalContent } from './modal.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    NgbdModalComponent, NgbdModalContent
  ],
  entryComponents: [NgbdModalContent],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.html

  <div class="container-fluid">
    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

    <ngbd-modal-component></ngbd-modal-component>
  </div>

modal.component.ts

import {Component, Input} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>NgbdModalComponent
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal.component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

modal.component.html

<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

错误：没有 NgbModal 的提供者、错误上下文、未处理的承诺拒绝：没有 NgbModal 的提供者。感谢您的反馈。

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

您必须将NgbModule 导入到NgModule 的imports 数组中。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule.forRoot(), ...],
  ...
})
export class AppModule {
}

【讨论】：

我觉得自己很愚蠢，这就是我制作一个新项目来测试模态的结果:(对不起。我现在是否应该删除这个问题。
只是想知道，但我需要两个模态，我是否只需将所有内容复制两次？
@JordanGS 依赖于你。您可以将它们视为普通组件。 :-)
我遇到的问题是，如果我将选择器 ngbd-modal-content 更改为其他任何内容，我会在尝试构建时出错，这会阻止我创建其他组件。跨度>
@JordanGS 你可以发布一个新问题，我认为有很多人在等着帮助你解决问题。

【解决方案2】：

尝试在组件上提供 NgbActiveModal

providers: [
    NgbActiveModal,
]

【讨论】：

【解决方案3】：

以防万一您使用延迟加载。将 NgbModule 放入 imports 数组中也很重要。不过这次不像@Pengyy 说的那样，而是

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class LazyLoadedModule {
}

【讨论】：