web-dev-qa-db-ja.com

NgbModal openメソッドを呼び出すためのベストプラクティス

NgbModal をいじり、テンプレートコード以外の場所からopenメソッド-> open(content: string | TemplateRef<any>, options: NgbModalOptions) <-をトリガーしたい。私の場合、コンポーネントの.tsファイルでメソッドを実行するときに、パラメーターとして文字列を渡します。 <button (click)="open(content)">Launch demo modal</button>のようなhtmlファイル内のボタンを介してメソッドを実行すると、コードは素晴らしい動作をします。もちろん、htmlファイルの<template></template>内のすべてのコードで動作します。

これで何かを達成しようとしています：

logoutScreenOptions: NgbModalOptions = {
    backdrop: 'static',
    keyboard: false
};

lockedWindow: NgbModalRef;

lockedScreenContent= `
    <template #content let-c="close" let-d="dismiss">
        <div class="modal-header" style="text-align: center">
            <h3 class="modal-title">Title</h3>
        </div>
        <div class="modal-body">
            <p>Body</p>
        </div>
        <div class="modal-footer">
            <p>Footer</p>
        </div>
    </template>
`;

openLockedScreen(){
    this.open(this.lockedScreenContent);
}

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

コードはエラーなしで実行され、モーダルは次のように開きます。 レンダリングされたコンテンツのないモーダル ...これはまさに私が望むものではありません！

また、まったく同じ結果で、このようにしてみました：

lockedScreenContent= `
    <div class="modal-header" style="text-align: center">
        <h3 class="modal-title">Title</h3>
    </div>
    <div class="modal-body">
        <p>Body</p>
    </div>
    <div class="modal-footer">
        <p>Footer</p>
    </div>
`;

私は何が欠けていますか？ 「コンテンツ」パラメータとして文字列を渡すことはできませんか？

TsファイルからtemplateRefパラメーターを使用する方法についても頭を悩ませることはできません！

angularmodal-dialogng-bootstrap
11
Patrik Nilsson

現在、 https://ng-bootstrap.github.io/#/components/modal のopenメソッドには、open(content: string | TemplateRef<any>, options: NgbModalOptions)というシグネチャがあります。この署名からわかるように、次のようなコンテンツを提供するモーダルを開くことができます。

  • string
  • TemplateRef

string- typed引数はあまりおもしろくありません-実際には、デバッグ/単体テストを支援するために追加されました。それを使用することにより、マークアップではなく、テキストの一部を渡すことができます。Angularディレクティブ。それ自体はデバッグツールであり、実際に役立つものではありません。人生のシナリオ。

TemplateRef引数は、表示するマークアップ+ディレクティブを渡すことができるため、より興味深いものです。コンポーネントテンプレート（モーダルを開く予定のコンポーネントのテンプレート）のどこかで_<template #refVar>...content goes here...</template>_を実行することで、TemplateRefに手を加えることができます。したがって、TemplateRef引数は、マークアップ、ディレクティブ、その他のコンポーネントなどを使用できるため強力です。欠点は、TemplateRefがコンポーネントからモーダルを開く場合にのみ役立つことです。テンプレート。

計画されているがまだ実装されていない機能を探しているという印象を受けました-コンテンツとしてコンポーネントタイプでモーダルを開く機能。次のように機能します：modalService.open(MyComponentWithContent)。前述したように、これはロードマップの一部ですが、まだ実装されていません。次の方法でこの機能を追跡できます https://github.com/ng-bootstrap/ng-bootstrap/issues/68

15
pkozlowski.opensource

次のことができるようになりました...

モデルコンポーネントがあるとします。他のコンポーネントで使用するモデルを確認します。

  1. ModelComponentNameは、module.tsの宣言およびentryComponentセクションに追加されます
  2. 上記の宣言を含むモジュールファイルのインポートにNgbModule.forRoot（）を追加することを忘れないでください。

  3. モデルコンポーネントテンプレートがng-templateタグではなくdivタグ内にあることを確認してください。

その後、他のコンポーネントから次のopenメソッドを使用できます。

modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});
2
Rahul Wasnik