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

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

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

ライフサイクルイベント

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

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

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

使用例

データの再ロード

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

@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要素を参照する例をあげます。

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div #hello>Hello!!</div>
</ion-content>

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>
  }
}

Ionicにおけるライフサイクルイベントと簡単なその使用例を紹介しました。アプリが意図した挙動にならないときライフサイクルを意識してみると良いです。

Androidアプリ開発の必須知識！JAVAプログラミングを学べる連載リンク

はじめてのJAVA 連載