[解決済み】*ngIfの@ViewChild

質問

質問

を取得する最もエレガントな方法は何ですか？ @ViewChild が表示された後、そのテンプレート内の対応する要素が表示されますか？

以下はその例です。また プランカー が利用できます。

Component.template.html。

<div id="layout" *ngIf="display">
  <div #contentPlaceholder></div>
</div>

Component.component.ts。

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 しかし、無駄な呼び出しが多すぎる。

ANSWER（プランカー）

解決方法は？

ViewChildのセッターを使用します。

 private contentPlaceholder: ElementRef;

 @ViewChild('contentPlaceholder') set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
        this.contentPlaceholder = content;
    }
 }

セッターは要素の参照で一度だけ呼び出されます。 *ngIf が true .

注：Angular 8 では、必ず { static: false } これは他のバージョンのAngularではデフォルトの設定です。

 @ViewChild('contentPlaceholder', { static: false })

注意: contentPlaceholder がコンポーネントである場合、ElementRef をコンポーネントの Class に変更することができます。

  private contentPlaceholder: MyCustomComponent;

  @ViewChild('contentPlaceholder') set content(content: MyCustomComponent) {
     if(content) { // initially setter gets called with undefined
          this.contentPlaceholder = content;
     }
  }