Angular2 ng-bootstrapモーダルがコンポーネント内にあります

Question

入力がOKのときにsaveを使用してコンポーネントのブートストラップモーダルを閉じます。 私はthisソリューションを試みたが、私はエラーを次取得角度V2.4.1とng-bootstrap 1.0.0-alpha.19

を使用しています：

No provider for ViewContainerRef

は、私は私のmodule.tsにViewContainerRefを追加しようとしましたが、私はエラーを次取得します：ここで

Type 'typeof ViewContainerRef' is not assignable to type 'Provider'

私のコンポーネントのコード：

import { Component } from '@angular/core'; 
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: '[add-name]', 
    templateUrl: '../add-name.html' 
}) 

export class MyComponent { 
    public errorMessage: string = ''; 

    constructor(public modalActive: NgbActiveModal) {} 

    public saveNewStuff(name: string) { 
     this.errorMessage = ''; 

     if (name === '' || name === undefined) { 
      this.errorMessage = 'some message'; 
     } else if (this.errorMessage === '') { 
      this.modalActive.close(); 
     } 
    } 
} 

私もNgbModalRef

constructor(public modalRef: NgbModalRef) {} 

public closeModal() { 
    this.modalRef.close(); 
    this.modalRef.dismiss(); 
} 

などを使用しようとした。しかし、これはまったく機能していません。私はエラーメッセージを受け取っていません。

Answer 1

：

public mr: NgbModalRef; 
... 
public openModal(content: string) { 
    this.mr = this.modalService.open(content); 
} 
... 
public closeModal() { 
    this.mr.close(); 
} 

Answer 2

角度2にブートストラップモーダルポップアップを使用する：HTMLで

：ちょうどコピーしてブートストラップモーダルポップアップコードを貼り付けます。 TSファイルで

：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'mymodal', 
    templateUrl: 'html page url' 
}) 
export class ModalComp { 
} 

その後、あなたはTSファイルにインポートすることで、任意のHTMLビューで、このコンポーネントを使用することができます。

ビューで

import {ModalComp} from '/your component location'; 

：あなたが好き、後でそれを閉じるためにopenendモーダルウィンドウへの参照を保存する必要があり

<mymodal></mymodal>