Angular6 ngDoCheckとngOnChangesの違いについて

   

今まで基本的にはngOnInitしか使用していなかったのですが、ngDoCheckとngOnChangesに明確な違いがあることを知ったので記事にしておこうと思います

こちらが今回使用するコードです

・header.component.ts

・app.component.ts

の2つです

 

 

 

ngOnChangesについて

 

ngOnChangesはどの変数が変化しても発火するものと考えていましたが、そうではなく@Input要素にのみ発火します

 

 

@Inputの要素ではないcountにsetIntervalでデータを追加してみると

 

 

ngOnChangesは発火しません

 

 

ですので、ngOnChangesを使用するときは必ず@Inputの要素であることが重要です

 

ngDoCheckについて

 

ngDoCheckは@Inputの要素ではないが変化を取得したいときに使います

先ほどの例だとcountがそれに当たりますね

ちょいコードを変えます

 

 

こうすることによって以下の画像のように@Input要素でなくともデータを取得することができます。

 

ただしngDoCheckは高負荷になりやすいそうなので注意が必要です

 

参考リンク

If you think ngDoCheck means your component is being checked — read this article
Angular2 change detection: ngOnChanges not firing for nested object
Angular 2アンチパターン集

 - Angular, html, Javascript, node.js, typescript , , , ,