質問
@ViewChild
テンプレート内の対応する要素が表示された後に取得する最もエレガントな方法は何ですか?
以下に例を示します。またPlunker利用できます。
テンプレート:
<div id="layout" *ngIf="display">
<div #contentPlaceholder></div>
</div>
成分:
export class AppComponent {
display = false;
@ViewChild('contentPlaceholder', {read: ViewContainerRef}) viewContainerRef;
show() {
this.display = true;
console.log(this.viewContainerRef); // undefined
setTimeout(()=> {
console.log(this.viewContainerRef); // OK
}, 1);
}
}
デフォルトでコンテンツが非表示になっているコンポーネントがあります。誰かがshow()
メソッドを呼び出すと、それが表示されます。ただし、Angular 2の変更検出が完了する前に、を参照することはできませんviewContainerRef
。私は通常、setTimeout(()=>{},1)
上記のようにすべての必要なアクションをラップします。もっと正しい方法はありますか?
にオプションがあることは知っていますがngAfterViewChecked
、これにより無駄な呼び出しが多くなりすぎます。