ViewChild returns undefined

Question

私はマテリアルデザインと角度5を使用しています。マテリアルローダーを使用しようとしていたので、ナビゲーションを開始するときにローダーを表示し、終了時にローダーを取り除くときはthis questionになりました。私は

<mat-progress-bar #spinnerElement [mode]="'indeterminate'" [color]="'primary'"></mat-progress-bar> 

でviewchildを試してみましたが、以下のように私のコンポーネントのコンストラクタで呼び出さ：

@ViewChild('spinnerElement') 
spinnerElement: ElementRef; 

constructor(
..... 
    private ngZone: NgZone, 
    private renderer: Renderer) { 
     console.log(this.spinnerElement, 'spinnerElement'); 
    } 

しかし、コンソールは常にundefinedを返します。 Angularの新しいビット。なぜ、みんな？

Answer 1

角度life cycleを見てください。

まだレンダリングされていないため、コンストラクタ内のDOM要素にアクセスすることはできません。

ngOnInit（）の 'spinnerElement'にアクセスしてみてください。

ngOnInit（）：

は角最初の表示後 データ結合特性を指令/コンポーネントを初期化し、指令/コンポーネントの入力 プロパティを設定します。最初のngOnChanges（）の後に1回呼び出されます。

Answer 2

@ViewChildngOnInit()にアクセスしてください。初期化する前に使用することはできません。