尝试关闭时出现NgbModal错误

问题描述：

我已成功将NgbModal嵌入到Angular 2应用程序中，我目前在模式中显示了另一个组件。尝试关闭时出现NgbModal错误

我的问题是，一旦它出现了，我点击关闭我收到以下错误信息：我一直在关注Components as content

Cannot read property 'close' of undefined

现在我已经看过了HTML，也走过了打字稿，但是我不确定我在这里实际上失去了什么。

这是我喜欢的类型的脚本文件：

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>

可能有人请一些线索了为什么我收到此错误，也许能帮我解决这个问题？

答

请忽略，我解决了这个问题。失踪下面的构造断bug-detail.component.ts

constructor(public activeModal: NgbActiveModal) {}

我得到一个错误：'错误：没有提供程序NgbActiveModal'任何帮助??！ –

答

在应用模块供应商[NgbActiveModal]添加NgbActiveModal。

答

您可以运行到的情况下，进口“NgbModal”同样的错误中缺少行

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

尝试关闭时出现NgbModal错误

相关推荐