次のページにパラメータを渡す方法

次のページに遷移する方法」では、あるページから次のページへ遷移する方法を紹介しました。

ここでは、その時にパラメータを渡す方法、及び、遷移先のページでそのパラメータを受け取る方法を示します。

次のページに遷移する方法」では、home ページから NextPage へ移動するには、 次のように NavController オブジェクトの push メソッドを呼びました。

  onClick(){
    this.navCtrl.push(NextPage);
  }

このときに、例えば次のようにしてパラメータを追加することができます。

onClick(){
    this.navCtrl.push(NextPage,
      {
        firstName: 'Hanako',
        lastName: 'Yamada'
      });
  }

受け取る側では DI で受け取る NavParams オブジェクトから、パラメータ名を指定して取得できます。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-next-page',
  templateUrl: 'next-page.html',
})
export class NextPage {

  firstName: string;
  lastName: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.firstName = navParams.get("firstName");
    this.lastName = navParams.get("lastName");
  }

}

確かに受け取ったかテンプレートに表示します。

<ion-header>
  <ion-navbar>
    <ion-title>nextPage</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h1 ion-text color="primary">Hello!</h1>

  <ion-list>
    <ion-item>{{firstName}}</ion-item>
    <ion-item>{{lastName}}</ion-item>
  </ion-list>
</ion-content>

以上で確かにページ間でパラメータを渡せたことが確認できました。

ionic serve --lab とすると、次のように iOS、Android など異なるプラットフォームの画面を同時に確認することが可能です。