尝试关闭时出现 NgbModal 错误答案

【问题标题】：NgbModal error when trying to close尝试关闭时出现 NgbModal 错误
【发布时间】：2017-05-15 04:52:11
【问题描述】：

我已经成功地将 NgbModal 集成到我的 Angular 2 应用程序中，我目前在模式中显示了另一个组件。

我遇到的问题是，一旦它出现并单击关闭，我会收到以下错误消息：

Cannot read property 'close' of undefined

现在我一直在关注 Components as content 我查看了 HTML 并查看了 Typescript，但是我不确定我在这里实际上缺少什么。

这是我的类型脚本文件：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BugService } from '../service/bug.service';
import { Bug } from '../model/bug';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { BugDetailComponent } from '../../bug-detail/bug-detail.component';

@Component({
   selector: 'bug-list',
   templateUrl: './bug-list.component.html',
   styleUrls: ['./bug-list.component.css']
})

export class BugListComponent implements OnInit {

  private bugs: Bug[] = [];

  constructor(private bugService: BugService, private cdRef: ChangeDetectorRef, private modalService: NgbModal) { }

  ngOnInit() {
    this.getAddedBugs();
  }

  getAddedBugs() {
    this.bugService.getAddedBugs().subscribe(bug => {
        this.bugs.push(bug);
        this.cdRef.detectChanges();
    },
        err => {
            console.error("unable to get added bug - ", err);
        });
  }

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

我导入BugDetailComponent，然后在open() 函数中引用它。当我在模式出现后单击关闭时，我会看到错误消息。

我的 HTML 如下：

<div class="modal-header" [id]="modalId">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
<h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
   <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

有人能解释一下我收到此错误的原因并帮助我解决它吗？

【问题讨论】：

标签： angular bootstrap-modal ng-bootstrap

【解决方案1】：

请忽略，我已解决此问题。在bug-detail.component.ts 中缺少以下构造函数

constructor(public activeModal: NgbActiveModal) {}

【讨论】：

我收到一个错误：Error: No provider for NgbActiveModal! 有什么帮助吗？？
将 NgbActiveModal 添加到 app.module.ts 中的提供者

【解决方案2】：

在模块的 providers[NgbActiveModal] 中添加 NgbActiveModal。它将在模块的所有组件中可用，然后在组件的构造函数中声明其变量，例如构造函数（私有 ngvActiveModal：NgbActiveModal）；

【讨论】：

【解决方案3】：

如果行中缺少 import "NgbModal"，您可能会遇到同样的错误

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

【讨论】：

这不是真的

【解决方案4】：

如果有人遇到同样的问题（我尝试了 Code Ratchet 的解决方案，但遇到了与 Adrita Sharma 相同的问题）。

const modalRef = this.modalService.open(BugDetailComponent);

通过在模板中使用 modalRef.close()，我能够使用 close 和 dismiss。

示例：

<button type="button" class="btn btn-secondary" (click)="modalRef.close('Close click')">Close</button>

【讨论】：