web-dev-qa-db-ja.com

ngOnInit（）、ngAfterViewInit（）、ngafterContentInit（）、ngAfterViewChecked（）とコンストラクタ（）の違いは何ですか？

ngOnInit（）、ngAfterViewInit（）、ngafterContentInit（）、ngAfterViewChecked（）とaの違いは何ですかコンストラクタ（）？ Angular 2？でそれらをどのように実装しますか？それらの目的と使用法は何ですか？それらを実装するためにすべてが役立つでしょうか？

ありがとう。

angulartypescriptangular-lifecycle-hooks
9
Ashfaque Rifaye

これらは、ライフサイクルフックで、コンポーネントのライフサイクルの操作やさまざまな時間を実行するために利用できます。

公式のトピックに関する優れたガイドがありますangularドキュメント： https://angular.io/guide/lifecycle-hooks

コンポーネントには、Angularによって管理されるライフサイクルがあります。

Angularはそれを作成し、レンダリングし、その子を作成してレンダリングし、データにバインドされたプロパティが変更されたときにチェックし、DOMから削除する前に破棄します。

Angularは、これらの主要なライフモーメントを可視化し、それらが発生したときに行動するライフサイクルフックを提供します。

次の 公式ドキュメント の図は、ライフサイクルフックの順序を示しています。

enter image description here

9
Fredrik Lundin

コンストラクタ

これは、Angularがコンポーネントをインスタンス化するときにトリガーされるクラスコンストラクターです。主にDIに使用され、Angularが変更検出を実行する前に呼び出されます。詳細については、こちらをご覧ください。ここに：

ngOnInit（）、ngAfterViewInit（）、ngafterContentInit（）、ngAfterViewChecked（）

これらはライフサイクルフックです。それらは呼び出されるタイミングが異なるため、それぞれで使用できるデータも異なります。変更検出の他の操作に関するタイミングは、記事に明確に示されています。

Angularでの変更検出について知っておくべきことすべて

順序は明確に定義されています。

  1. バインディングが変更された場合の子コンポーネントのOnChangesライフサイクルフック

@Inputバインディングに変更があるたびに通知します。これらのバインディングを追跡するために常に必要がある場合に使用します。

  1. 子コンポーネントのOnInitおよびngDoCheck（OnInitは最初のチェック時にのみ呼び出されます）

@Inputバインディングが使用可能であることを通知します。これらのバインディングを常に追跡する必要がない場合に使用します。

  1. 子コンポーネントインスタンスのAfterContentInitおよびAfterContentCheckedライフサイクルフック（AfterContentInitは最初のチェック中にのみ呼び出されます）

Angular投影されたコンテンツ（ng-content）の変更検出を実行したことを通知します。@ContentChildrenデコレータを使用して投影された要素をクエリする必要がある場合に使用します。

  1. 子コンポーネントインスタンスのAfterViewInitおよびAfterViewCheckedライフサイクルフック（AfterViewInitは最初のチェック中にのみ呼び出されます）

Angularがビューコンテンツの変更検出を実行したことを通知します。@ViewChildrenデコレータを使用してビュー要素をクエリする必要がある場合に使用します。

ngDoCheckライフサイクルフックについては、多くの混乱があります。詳細を読むには ngDoCheckがコンポーネントがチェックされていることを意味する場合—この記事を読む 。

5
Maxim Koretskyi