AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

角度

成し遂げる

まず、実装方法についてはあまり言う必要はありません。フック関数を使用するには、定義時に対応するインターフェースを実装する必要があります。

エクスポートクラスListPageはOnInitを実装します{
  コンストラクタ() {}

  ngOnInit() {
    // ここにコード
  }
}

呼び出し順序

1.コンストラクタ

最初に実行されるのはコンストラクタです。コンストラクタ実行時には、@Input や @ViewChild などの多くの変数は存在しません。関連する操作は ngOnInit に記述するのがベストです。

2. 変更時

現在のコンポーネント @Input/@Output のバインディング値が変更されたときにトリガーされます。
さらに、@Input がオブジェクトの場合、参照が変更された場合にのみトリガーされます。

3. ngOnInit

最初の ngOnChanges が完了した後に呼び出されます。1 回だけ実行されます。

4. ngDoCheck

開発者が定義した変更検出。

5. ngAfterContentInit

コンポーネントコンテンツが初期化されるときに1回実行される

6. ngAfterContentChecked

コンポーネントに投影されたコンテンツは、ngDoCheck 呼び出しごとにトリガーされます。

7. ngAfterViewInit

コンポーネントとそのサブコンポーネントビューが初期化されるときに一度実行されます。

8. ngAfterViewChecked

コンポーネントとその子ビューでの各 ngDoCheck 呼び出しの後に発生します。

9. ngOnDestroy

コンポーネントが破棄される前に呼び出されます。

知らせ

コンストラクタにすべてのデータが存在するわけではなく、@ViewChild @ViewChildren @Inputなどの値はまだバインドされていません
変更が検出されると ngDoCheck がトリガーされます。パフォーマンスに非常に負荷がかかるため、注意して使用してください。

イオニック

上記のリンクをクリックすると元の文書が表示されます。重要なポイントを強調します。

ライフサイクルは図に示されています。Angular が提供するライフサイクルに加えて、Ionic はいくつかのイベントを追加します。

ionViewWillEnter ルーティングコンポーネントがビューに表示されようとしています
ionViewDidEnter ルートコンポーネントがビューに表示されました

ionViewWillEnterはngOnInitの後にトリガーされ、ionViewDidEnterはページ切り替えの遷移効果が終了した後にトリガーされます。

ionViewWillLeave 現在のルートを離れようとしているコンポーネント
ionViewDidLeave 現在のルートを離れたコンポーネント

ionViewWillLeave が最初に呼び出され、新しいページへの遷移が成功するまで (新しいページの ionViewDidEnter がトリガーされた後)、ionViewDidLeave は呼び出されません。

ion-nav または ion-router-outlet を使用するコンポーネントは、OnPush 変更検出戦略を使用しないでください。これにより、ngOnInit などのライフサイクルフックがトリガーされなくなります。さらに、非同期に変更されたデータは正しくレンダリングされない可能性があります。

ionic はページのライフサイクルをどのように処理しますか?

ionic で使用されるルーティングアウトレットは <ion-router-outlet /> です。これは Angular の <router-outlet /> を拡張し、モバイルデバイスでより優れたエクスペリエンスを提供できます。

あるページから新しいページにジャンプすると、Ionic は古いページを DOM に保存し、表示しないようにします。これにより、スクロール位置やページデータなど、前のページの状態を維持できるため、新しいページから前のページに戻るときに再読み込みする必要がなく、ページ遷移がよりスムーズになります。

ページはスタックから抜けたときにのみ破棄されるため、ngOnInit と ngOnDestroy がトリガーされるタイミングは想像どおりにならない可能性があります。

たとえば、A は詳細ページで、データを変更するにはページ B に移動します。変更が完了したら、ページ B からページ A に戻ります。
ページ A のデータ取得メソッドが ngOnInit に記述されている場合、B から A に戻るときに ngOnInit はトリガーされず、明らかにビジネス要件を満たしません。
したがって、このデータの取得はionViewWillEnterに記述することができ、BからAに戻るときにトリガーされ更新される。

ルートガード

Ionic 3 には、ページに入る/離れることができるかどうかを判断するために使用する ionViewCanEnter と ionViewCanLeave という 2 つのフック関数がありました。これらは通常、アクセス権を制限したり、編集ページを離れる前に 2 次確認プロンプトをポップアップ表示したりするために使用されていました。これら 2 つの関数は非推奨になりました。Ionic 4 以降では、Angular の公式ルーティングガードを使用します。

要約する

Angular と Ionic のライフサイクルとフック関数に関するこの記事はこれで終わりです。Angular Ionic のライフサイクルとフック関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: