閉じようとするとNgbModalエラーが発生する

Question

NgbModalをAngular 2アプリケーションに正常に反映させました。現在、モーダル内に別のコンポーネントが表示されています。

私は次のエラーメッセージを取得、それは現れだと私は[閉じる]をクリックしたら、私が持っている問題がある

：私は活字体を通じてHTMLを見て、また行ってきたComponents as contentを今すぐ

Cannot read property 'close' of undefined 

を追ってきましたしかし、私はここで実際に何が欠けているのか分かりません。

これは私のタイプのスクリプトファイルです：私はその後、open()関数内で参照BugDetailComponentをインポート

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'; 
    } 
} 

。モーダルが表示された後に閉じるをクリックすると、エラーメッセージが表示されます。次のように

私の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> 

誰かが、私はこのエラーが発生した理由の中にいくつかの光を当てると、多分私はそれを修正する助けてくださいもらえますか？

Answer 1

私はこれを修正しました。アプリモジュールで[NgbActiveModal]プロバイダでNgbActiveModalを追加bug-detail.component.ts

オフ

constructor(public activeModal: NgbActiveModal) {} 

Answer 2

を次のコンストラクタがありませんでした。 `エラー：！あなたはケースのインポート「NgbModal」で同じエラーに実行することができます

Answer 3

は、私はエラーになっていますラインで

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