Ionic PageのLife Cycle
このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。(追記:Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます)
Angular の Life Cycle Events
Ionic は Angular が提供する Life Cycle Events を取 り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。
Event Name | Description |
---|---|
ngOnInit | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 |
ngOnDestroy | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 |
Angular の Component Life Cycle イベントの詳細については、それらの component lifecycle docs をご覧ください。
ion-nav
または ion-router-outlet
を使用するコンポーネントは、 OnPush
変更検出方式を使用しないでください。そうすることで、 ngOnInit
などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。
Ionic の Page Events
Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります:
Event Name | Description |
---|---|
ionViewWillEnter | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
ionViewDidEnter | コンポーネントが表示されるアニメーションが 終了した時に 発火します。 |
ionViewWillLeave | コンポーネントを離脱するアニメーションが はじまる時に 発火します。 |
ionViewDidLeave | コンポーネントを離脱するアニメーションが 終了した時に 発火します。 |
これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、/pageOne
がPageOneComponent
にマッピングされた場合、Ionic ライフサイクルはPageOneComponent
で呼び出されますが、PageOneComponent
がレンダリングする子コンポーネントでは呼び出されません。
ionViewWillEnter
とionViewDidEnter
の違いは、いつ発火するかです。前者は ngOnInit
の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます 。
ionViewWillLeave
と ionViewDidLeave
についてですが、 ionViewWillLeave
は現在のページから離脱する処理がはじまる前に呼び出されますが、 ionViewDidLeave
は新しいページに遷移する処理が成功してから呼び出されます (新しいページの ionViewDidEnter
が発火した後になります)。
Ionic が Page の Life をどのように処理するか
Ionic は <ion-router-outlet />
という router outlet を持っています。この outlet が Angular の <router-outlet />
を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
<ion-router-outlet />
にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります:
- 古いページの状態を維持することができます(画面上のデータ、スクロール位置など)。
- ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
たとえば、UI の "