メインコンテンツにスキップ
バージョン: v8

Ionicページライフサイクル

このガイドでは、IonicとAngularで構築されたアプリにおけるページライフサイクルの仕組みについて説明します。

Flowchart illustrating the Ionic page life cycle events and their sequence.

Angularライフサイクルイベント​

Ionicは、Angularが提供するライフサイクルイベントを採用しています。最もよく使用する2つのAngularイベントは次のとおりです。

イベント名説明
ngOnInitコンポーネントの初期化中に1回だけ発生します。このイベントは、ローカルメンバーの初期化や、1回だけ実行する必要があるサービスの呼び出しに使用できます。
ngOnDestroyAngularがビューを破棄する直前に発生します。オブザーバブルの登録解除などのクリーンアップに役立ちます。

Angularコンポーネントライフサイクルイベントの詳細については、コンポーネントライフサイクルのドキュメントをご覧ください。

（注意アイコンのSVGは省略）注意

ion-navまたはion-router-outletを使用するコンポーネントでは、OnPush変更検出ストラテジーを使用しないでください。使用すると、ngOnInitなどのライフサイクルフックが発生しなくなります。さらに、非同期状態の変更が正しくレンダリングされない場合があります。

Ionicページイベント​

Angularライフサイクルイベントに加えて、Ionic Angularは、使用できる追加のイベントをいくつか提供しています。

イベント名説明
ionViewWillEnterルーティング先のコンポーネントがビューにアニメーション化される直前に発生します。
ionViewDidEnterルーティング先のコンポーネントのアニメーションが*完了*したときに発生します。
ionViewWillLeaveルーティング*元*のコンポーネントがアニメーション化される直前に発生します。
ionViewDidLeaveルーティング*元*のコンポーネントのアニメーションが*完了*したときに発生します。

これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントでのみ呼び出されます。つまり、/pageOneがPageOneComponentにマッピングされている場合、IonicライフサイクルはPageOneComponentで呼び出されますが、PageOneComponentがレンダリングする可能性のある子コンポーネントでは呼び出されません。

ionViewWillEnterとionViewDidEnterの違いは、発生するタイミングです。前者はngOnInitの直後ですが、ページ遷移が始まる前に発生し、後者は遷移の終了直後に発生します。

ionViewWillLeaveとionViewDidLeaveの場合、ionViewWillLeaveは現在のページから離れる遷移が始まる直前に呼び出され、ionViewDidLeaveは新しいページが正常に遷移されるまで（新しいページのionViewDidEnterが発生した後まで）呼び出されません。

Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.

Ionicがページのライフを処理する方法​

Ionicには、<ion-router-outlet />と呼ばれる独自のルータアウトレットがあります。このアウトレットは、モバイルデバイスのエクスペリエンスを向上させるために、Angularの<router-outlet />をいくつかの追加機能で拡張しています。

アプリが<ion-router-outlet />でラップされている場合、Ionicはナビゲーションを少し異なって処理します。新しいページに移動すると、Ionicは古いページを既存のDOMに保持しますが、ビューから非表示にして新しいページに遷移します。これを行う理由は2つあります。

  1. 古いページの状態（画面上のデータ、スクロール位置など）を維持できる
  2. 古いページがすでに存在し、再作成する必要がないため、ページへのスムーズな遷移を提供できる

ページは、UIの戻るボタンやブラウザの戻るボタンを押すなどして「ポップ」された場合にのみDOMから削除されます。

この特別な処理のため、ngOnInitメソッドとngOnDestroyメソッドは、通常考えられるタイミングで発生しない場合があります。

ngOnInitは、ページが新しく作成されるたびに発生しますが、ページに戻ってナビゲートされたときには発生しません。たとえば、タブインターフェースの各ページ間を移動すると、各ページのngOnInitメソッドは1回だけ呼び出されますが、後続の訪問では呼び出されません。 ngOnDestroyは、ページが「ポップ」されたときにのみ発生します。

ルートガード​

Ionic 3には、ページに入ることができるタイミング（ionViewCanEnter）と出ることができるタイミング（ionViewCanLeave）を制御するのに役立つ、2つの追加のライフサイクルメソッドがありました。これらは、不正なユーザーからページを保護したり、フォーム入力中など、ユーザーにページから出てほしくないときにユーザーをページに留めておくために使用できました。

これらのメソッドは、Ionic 4で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 - オブザーバブルの登録解除など、クリーンアップに使用できます。 ngOnDestroyは、現在のページから移動しても発生しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
  • ionViewDidLeave - このイベントが発生すると、新しいページが完全に遷移されたことがわかるため、ビューが表示されているときには通常行わないロジックはここに配置できます。
  • ngOnDestroy - ionViewWillLeaveでクリーンアップしたくないページのクリーンアップロジック。

目次

このページを編集