Ionicのライフサイクルイベント

スマートフォンを操作するサムネイル
この記事は執筆当時のバージョン v3.19.1 の内容で、現在は仕様が変更されている可能性があります。
2019年5月に、Ionic は v4.4.0 ( コードネーム : Beryllium ) が発表されています。
https://blog.ionicframework.com/ionic-release-4-4-0-beryllium/

今後の Ionic の更新状況にあわせ、随時情報を収集予定です。

一般に、「ページが読み込まれた」「アクティブな状態になった」等の、
アプリで起こった出来事、状態の事を、ライフサイクルイベントと呼びます。

Ionicの公式ドキュメントでは、

Lifecycle events are fired during various stages of navigation.

ライフサイクルイベントは、さまざまなナビゲーション段階で発生します。

と記載されています。

具体的には、目的のページに遷移した直前や直後に、
必ず最初に実行させたい処理を記述したりする時に使用できます。

さて、公式記載の意訳になりますが、ionicにおけるライフサイクルイベントの種類を見てみましょう。

[ionViewDidLoad]
ページが読み込まれたときに発生する。
対象ページが既にキャッシュされている場合、このイベントはその後の表示で再び発生しない。

[ionViewDidEnter]
ページが生成され、アクティブな状態になったときに発生する。
キャッシュされたページであっても発生する。

[ionViewDidLeave]
ページがアクティブではなくなった時に発生する。

[ionViewWillEnter]
ページが生成され、アクティブな状態になる直前に発生する。

[ionViewWillLeave]
ページがアクティブではなくなる直前に発生する。

[ionViewWillUnload]
ページがアクティブではなくなり、破棄される直前に発生する。

このように、Did系統とWill系統のイベントが存在します。(この他には真偽値を返すイベントが2つあるようです。)
実行させたい処理の目的によって、適したタイミングのイベントを使用する形になりますね。

公式ドキュメントの該当ページは下記の通り。同ページで Lifecycle events と検索すると該当セクションがあります。
https://ionicframework.com/docs/api/navigation/NavController/

僕が制作したアプリの例でいうと、
あるページに遷移した事によりフラグを立たせ、
ngIfと組み合わせて、2度目の遷移の際には初回とは違った表示をさせる、
といった時に使用したり、遷移後にローダーを表示させる時に使用したりしました。
※ngIf、というのはAngularJSの要素で、指定した条件により出力内容を分ける時に使用できます。

tedate.jpでは今後もIonic関連の記事を書いていく予定です!
Ionicに触れる人が、もっともっと多くなれば幸いです!

この記事をシェアする: