Ionicでモバイルアプリを作ろう！(11)ページのイベントを扱う

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

今回はIonicでページ遷移に伴う各種イベントに応じた処理の実装方法を解説します。

ライフサイクルイベント

アプリにおいてページが生成されて破棄されるまでをそのページのライフサイクルと呼びます。そしてそのライフサイクルにおいて状態（生成・表示・非表示・破棄等）が変更される際に発火するイベントをライフサイクルイベントと呼びます。画面遷移をする際にはこのライフサイクルに気を配る必要があります。

Ionicでは画面遷移はNavControllerによって管理されます。NavControllerによってpush/popされたページはいずれも以下のコールバックメソッドを持ちます。状態が変更するタイミングでコールバックメソッドが呼ばれるわけです。これらを用いてページのライフサイクルイベントを取得し、各イベントで行いたい処理を実装します。

メソッド	戻り値	概要
`ionViewDidLoad`	void	ページがロードされたとき呼ばれます。ページオブジェクトが生成された最初だけ呼ばれます。つまりキャッシュが残っている場合は呼ばれません。
`ionViewWillEnter`	void	ページがアクティブになる直前に呼ばれます。
`ionViewDidEnter`	void	ページが完全に読み込まれアクティブになったとき呼ばれます。最初の表示か再表示かを問いません。
`ionViewWillLeave`	void	ページが非アクティブになる直前に呼ばれます。
`ionViewDidLeave`	void	ページが完全に非アクティブになったとき呼ばれます。
`ionViewWillUnload`	void	ページが完全に破棄される直前に呼ばれます。
`ionViewCanEnter`	boolean/Promise<void>	そのViewが使える状態になったとき呼ばれます。Viewを表示する前に表示して良いかのチェックに使うことができます。
`ionViewCanLeave`	boolean/Promise<void>	そのViewが外せる状態になったとき呼ばれます。Viewを外す前に外して良いかのチェックに使うことができます。

以下に簡単な使用例を紹介します。

使用例

データの再ロード

例えばデータをネットワーク経由で取得し表示するページがあるとします。ページが表示されるタイミングで常に最新のデータを取得・表示したい場合、コンポーネントのコンストラクタでデータ取得メソッドをキックするやり方ではうまくいきません。ionViewWillEnterかionViewDidEnterでキックする必要があります。

home.ts@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController) {
 
  }
 
  ionViewWillEnter() {
    this.getHogeData();
  }
 
  private getHogeData(){
    //データ取得処理
  }
 
}

home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	`@Component({` `selector:` `'page-home',` `templateUrl:` `'home.html'` `})` `export` `class` `HomePage {` `constructor(public navCtrl: NavController) {` `}` `ionViewWillEnter() {` `this.getHogeData();` `}` `private` `getHogeData(){` `//データ取得処理` `}` `}`

DOM情報の取得

あまり頻度は多くありませんが、コンポーネントが内包するDOMの情報を取得したい場合があります。注意しなければならないのは、コンストラクタでDOMにアクセスは出来ないという点です。コンストラクタ実行時にはまだレンダリングが完了していないからです(参照しようとしてもundefined)。
レンダリングの完了が担保してくれるのがionViewDidLoad（またはionViewDidEnter）です。

以下に、ページ内のdiv要素を参照する例をあげます。

home.html<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <div #hello>Hello!!</div>
</ion-content>

home.html
1 2 3 4 5 6 7 8 9	`<ion-header>` `<ion-navbar>` `<ion-title>Home</ion-title>` `</ion-navbar>` `</ion-header>` `<ion-content` `padding>` `<div` `#hello>Hello!!</div>` `</ion-content>`

home.tsimport { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('hello') helloDiv: ElementRef;
 
  constructor(public navCtrl: NavController) {
    console.log(this.helloDiv); //->undefined
  }
 
  ionViewDidLoad() {
    console.log(this.helloDiv.nativeElement); //-><div>Hello!!</div>
  }
}

home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`import` `{ Component, ViewChild, ElementRef } from` `'@angular/core';` `import` `{ NavController } from` `'ionic-angular';` `@Component({` `selector:` `'page-home',` `templateUrl:` `'home.html'` `})` `export` `class` `HomePage {` `@ViewChild('hello') helloDiv: ElementRef;` `constructor(public navCtrl: NavController) {` `console.log(this.helloDiv);` `//->undefined` `}` `ionViewDidLoad() {` `console.log(this.helloDiv.nativeElement);` `//-><div>Hello!!</div>` `}` `}`