Angular2 Modalをプロジェクトに追加

Hy、プロジェクトにModalを追加します。私はAngular-cliを使用しています。私の角度バージョンは、ブートストラップ2.1.0です：4Angular2 Modalをプロジェクトに追加

私はng2-bootstrapとng2-bs3-modalを使用しようとしましたが、私は単純な例を発見していなかったので、私は混乱しています。

「OK」と「キャンセル」ボタンを備えたangular2モーダルの簡単な例を誰でも教えてください。ボタンのイベントを処理する必要があります。

2016-11-04 Mourad Idrissi

を有効または無効に最小化https://ng-bootstrap.github.io/#/components/modalいくつかの例があります。しかし、ng-bootstrapではなくng-bootstrapを使用します。 –

ありがとう、それは動作します:) –

あなたは角度2とブートストラップ4をターゲットにしている場合、私はNG-ブートストラッププロジェクトの魔女を使用することをお勧めし、非常に柔軟なモーダル実装があります：https://ng-bootstrap.github.io/#/components/modal

セットアップと使い方は非常に簡単です、あなたはあなたのコンポーネントからモーダルを開くことができますNgbModalサービスにopenメソッドを呼び出す：あなたの質問に

@Component({ 
    selector: 'ngbd-modal-basic', 
    templateUrl: 'src/modal-basic.html' 
}) 
export class NgbdModalBasic { 
    closeResult: string; 

    constructor(private modalService: NgbModal) {} 

    open(content) { 
    this.modalService.open(content).result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
    } 

    private getDismissReason(reason: any): string { 
    if (reason === ModalDismissReasons.ESC) { 
     return 'by pressing ESC'; 
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { 
     return 'by clicking on a backdrop'; 
    } else { 
     return `with: ${reason}`; 
    } 
    } 
}

を述べたようにすることが、いくつかの例があり、コメントすることができます自己完結型のコード、例：http://plnkr.co/edit/lM0GzDAqv0EYQ4qWit05?p=preview

とさえフォークplunkers

出典

2016-11-04 18:11:59

それは正常に動作します。ありがとうございます（ただし、カスタマイズされたモーダルを追加する際にはいくつかの問題があります） –

-1

ng-windowを使用しようとすると、開発者はシングルページアプリケーションで複数のウィンドウを簡単に開くことができ、No Jquery、No Bootstrap。

https://github.com/BahgatMashaly/ng-window