Ionic 4ページライフサイクル

Ionic 4ページライフサイクル
この文書では、IonicおよびAngularを使用してアプリケーションを構築するページのライフサイクルについて主に説明します.
AngularライフサイクルIonicは、Angularのライフサイクルをサポートします.Angularの次の2つのライフサイクルが最も多く使用されています.
イベント名
説明ngOnInit
コンポーネントが初期化されるとトリガーされます.このイベントは、メンバー変数を初期化し、一度だけ実行するサービスを呼び出すために使用できます.ngOnDestroy
ビューが破棄される前に呼び出され、observablesの購読をキャンセルできます.
IonicページライフサイクルAngularライフサイクルに加えて、Ionic Angularは、以下のライフサイクルイベントを提供する.
イベント名
説明ionViewWillEnter
コンポーネントがビューにルーティングされ、アニメーションが開始される前にトリガーされます.ionViewDidEnter
コンポーネントがビューにルーティングされ、アニメーションが完了するとトリガーされます.ionViewWillLeave
コンポーネントがビューからルーティングされ、アニメーションの開始前にトリガーされます.ionViewDidLeave
コンポーネントがビューからルーティングされ、アニメーションが完了するとトリガーされます.ionViewWillEnterとionViewDidEnterの違いは、主にトリガのタイミングにあり、前者はngOnInit以降のページアニメーションの前にトリガされ、後者はページアニメーションの後にトリガされる.ionViewWillLeaveおよびionViewDidLeaveの場合、ionViewWillLeaveは、ページから離れたアニメーションの開始時にトリガーされ、ionViewDidLeaveは、新しいページionViewDidEnterイベントのトリガー後に実行される.
Ionicはどのようにページの生命を処理しますIonicは、<ion-router-outlet />のAngularを継承し、モバイルデバイスにより良い体験を提供するいくつかの追加機能を有する独自のルータ出口、すなわち<router-outlet />を有する.
アプリケーションパッケージが<ion-router-outlet />にある場合、IonicのルーティングはAngularと少し異なる.新しいページに移動すると、Ionicは古いページを既存のDOMに保持し、ビューを非表示にして新しいページを変換します.私たちがこのようにした理由は2つあります.
1)古いページの状態(画面上のデータ、スクロール位置など)を維持できます.2)再作成する必要がないため、よりスムーズなページ変換を提供できます.
ページは、スタックを出たときにのみdomから削除されます.たとえば、UIの戻りボタンまたはブラウザ戻りボタンをクリックします.
このような特殊な処理により、ngOnInitおよびngOnDestroyは、一部のページ切り替え時に実行されない場合がある.ngOnInitは、ページの新規作成時にのみ実行され、他のページからそのページに戻った場合には実行されません.たとえば、タブインタフェースの各ページ間をナビゲートすると、各ページのngOnInitメソッドのみが呼び出されますが、その後のアクセスでは呼び出されません.ngOnDestroyは、ページがスタックから出たときにのみ起動します.
ルーティングガードIonic3において、2つの追加のライフサイクルイベントを使用して、ページionViewCanEnterにアクセスできるタイミングと、ページionViewCanLeaveから離れるタイミングを制御することができる.これらは、許可されていないユーザーによってページが使用されないように保護し、フォームを記入するときなど、ユーザーが離れたくないときにページに保持するために使用できます.
これらの方法はIonic4で除去され、この部分の機能はAngularのルーティングガードによって実現することができる.
ルーティングガードは、あるルーティングに対して特定の操作を実行することができる.特定のインタフェースのクラスを実装することによって、CanActivateおよびCanDeactivateは、削除イベントionViewCanEnterおよびionViewCanLeaveと同じ機能を実装することができる.

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.isAuthenticated();
  }
}

このガードを使用する場合は、ルーティング構成に追加する必要があります.

{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }

ルーティング・ガードに関する詳細については、Angularのルーティング・ガード・ドキュメントを参照してください.
ライフサイクルごとのガイドライン
以下に、各ライフサイクルイベントの使用例についていくつかのヒントを示します.

ngOnInit:コンポーネントを初期化し、サービスからデータをロードします.これらのデータは、後でアクセスするたびにリフレッシュする必要はありません.

ionViewWillEnter:ionViewWillEnterは、ページにナビゲートするたびに呼び出されるため(初期化の有無にかかわらず)、ページに入るたびにリフレッシュする必要がある場合は、良いタイミングです.しかし、アニメーションのロード中にデータが戻ってくると、大量のDOM操作が開始され、不安定なアニメーションが発生する可能性があります.

ionViewDidEnter:ionViewWillEnterにデータをロードしてパフォーマンスの問題が発生した場合、ionViewDidEnterでデータ呼び出しを実行するように変更できます.ただし、このイベントは、ユーザーがページを表示するまでトリガーされないため、ロードインジケータまたはスケルトン画面を使用して、データ・ロードが完了した後にコンテンツが不自然に点滅しないようにする必要があります.

ionViewWillLeave:observablesのサブスクリプションなどのコードのクリーンアップをキャンセルするために使用できます.ngOnDestroyは、現在のページから他のページに移動するとトリガーされない可能性があるため、クリーンアップ関連のコードをここに配置することができます.

ionViewDidLeave:このイベントがトリガーされると、新しいページが完全にロードされます.したがって、ページの非表示時に実行する必要がある論理はすべてここに置くことができます.

ngOnDestroy-ionViewWillLeaveで消去したくないページロジックを消去します.

テキストリンクhttps://ionicframework.com/docs/angular/lifecycle