Angular 2 TypescriptのコンポーネントからHTML内の変数へのアクセスを取得

Question

ng-bootstrapからモーダルポップアップを表示するには、次のコードを使用します。この例では、ボタンがクリックされると、open(content)というファンクションがトリガされてビューが表示されます。ご覧のとおり、#contentがHTMLテンプレートで定義されています。しかし、これは私が欲しいものではありません。私はボタンを完全に取り除き、このポップアップをプログラム的にトリガーしたい。したがって、私は何とか私のコンポーネントの#contentへの参照を取得する必要があります。

<template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <h4 class="modal-title">Modal title</h4> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body&hellip;</p> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" (click)="c('YES')">YES</button> 
     <button type="button" class="btn btn-secondary" (click)="c('NO')">NO</button> 
    </div> 
</template> 

<!--I dont want this button to trigger the template in my actual app. So imagine this code is not here!--> 
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button> 

コンポーネントでopen(content)のコード：

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

例えば、私のような何かをしたい：

// In this example, content is undefined as I am not and can not pass #content through from the HTML since it is not triggered by a button press like the demo 
if (myCustomCondition == true) { 
    this.modalService.open(content).result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
} 

Answer 1

TemplateRefができるドキュメントによると、渡されたhttps://ng-bootstrap.github.io/#/components/modal

ので、これは

@ViewChild('content') content:TemplateRef; 

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

それはあなたがここにレプリケーションしてみてください可能性があり、私のために働いているようだ