ionic ページ間でデータの受け渡しを行う4つの方法

以下のチュートリアルに従ってページ間でデータの受け渡しを行った。

データの処理は大事だな!

https://www.youtube.com/watch?time_continue=29&v=T5iGAAypGBA

$ ionic start ionic-pass-data blank
$ cd ionic-pass-data
$ ionic g page second

importと宣言をし、このアプリでsecondpageを使える準備をする。

app.module.ts

import { SecondPage } from '../pages/second/second'

declarations: [

    SecondPage
  ],

  bootstrap: [IonicApp],
  entryComponents: [

    SecondPage
  ],

nav

データを受け渡すのにはいくつか方法がある。

一つ目はnavControll、navParamsを使う方法。 NavControllerを受け渡す側にimport, constructorに注入し、以下のメソッドを記述。

受け渡す側(ex. home.ts)

  launchSecondPage(){

    let data = {
      title:"pan cake",
      ingredients:[
        "flour",
        "pancake stuff"
      ],
      time:"10 sec"
    }
    this.navCtrl.push(SecondPage, data);
  }

もらう側はNavParamsをimport、注入する。 このNavParamsが受け渡されるデータを保持するとのこと。

もらう側(ex. second.ts)

  ionViewDidLoad() {
    console.log(this.navParams.get("title"));
  }

以上でページが切り替わるとコンソールにdataのtitleが表示される。 この方法は1ページ目から2ページ目、2ページ目から3ページ目と、次のページにデータを受け渡すことができるが、2ページ目から何か処理をして1ページ目にデータを受け渡すことはできない。

modal

二つ目の方法はmodal データを入力し、元のページに反映させたい時にはmodalが役立つ。

ThirdPageをSecondPage作成時と同じ流れで、作成した。

third.ts

  // モーダルを閉じるためのthis.viewCtrl.dismiss(data);にdataを渡す
  closeModal(){
    let data = {
      title:"hello",
      message:"how are u"
    }
    this.viewCtrl.dismiss(data);
  }

home.ts

  launchThirdPage(){

    let modal = this.modalCtrl.create(ThirdPage);
 //モーダルが消えた時にコンソールに渡されたdataを表示する
    modal.onDidDismiss((data)=>{
      console.log(data)
    });
    modal.present();
  }

todoの編集や追加などに便利な感じ。

provider

では、あるデータをアプリケーション全体で使いたい時にはどうすればいいのだろうか。 例えば、ユーザー情報など。

そのような場合に便利なのがprovider。

$ ionic g provider User

app.module.tsに作成したproviderをimportする必要があるが上記のコマンドで自動でUserProviderが追加される。

user.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserProvider {

  username:string = "Oota";

  constructor() {
    console.log('Hello UserProvider Provider');
  }

}

providerをimport、注入すると他のページでもデータを使うことができる。 home.ts

import { UserProvider } from '../../providers/user/user';
  constructor(
    public navCtrl: NavController,
    public modalCtrl:ModalController,
    public userService:UserProvider
  ) {

  }

  launchForthPage(){
    console.log(this.userService.username)
  }

どのページからでも簡単に参照できて便利ではあるが、navやmodalでデータを渡せるシンプルなものまでこれを使ってしまうと、面倒になりすぎるとのこと。

Events

最後に紹介されているのがEventsによりデータを遷移する方法。 公式ドキュメントによるとEventsはpublishとsubscribeにより、データをページ間で受け渡すという方法。

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

Events - Ionic API Documentation - Ionic Framework

データを渡す方、もらう方の両方でEventsをimportする。

あげる方はthis.events.publish("文字列", あげるデータ)、

もらう方はthis.events.subscribe("文字列", もらうデータの処理) という形。

home.ts

import { NavController, ModalController, Events } from 'ionic-angular';
  constructor(
    public navCtrl: NavController,
    public modalCtrl:ModalController,
    public userService:UserProvider,
    public events:Events
  ) {}


  // Eventsによるデータの受け渡し
  ionViewDidLoad(){
    this.events.subscribe("recipe:added", (data)=>{
      console.log(data)
    })
  }
  launchFifthPage(){
    let modal = this.modalCtrl.create(FifthPage);
    modal.present();
  }

fifth.ts

import { IonicPage, NavController, NavParams, Events, ViewController } from 'ionic-angular';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl:ViewController,
    public events: Events
  ) {}

  addRecipe(){
    let data = {
      title:"pancakes",
      ingredients:"everything"
    };
    this.events.publish("recipe:added", data)
  }
  closeModal(){
    this.viewCtrl.dismiss();
  }

まとめ

まとめると紹介されていたデータの受け渡し方法は全部で四つ。 一つ目は、navによるデータの受け渡し方。1ページ目2ページ目と次のページにデータを渡す時に便利な方法。

二つ目はmodalによるデータの受け渡し方。navではできなかった2ページ目から1ページ目というような方法をすることができる。

三つ目はproviderによる方法。navやmodalでデータを渡すにはデータ量の多い、例えばユーザー情報などを渡すのに便利である。

四つ目はEventsによる方法。providerを用いてmodelを作成するにはちょっと大げさかなというような場合にユーザーのイベントに応じて処理をnavやmodalよりも柔軟に対応することができるという方法。

よくチュートリアルをやっていてsubscribeやpublishというワードを見つけたことがあるが、ここで使うのかと知ることができた。

ionicを触り始めるのがバリバリのエンジニアではなく、デザイナーさんやここからプログラミング始めますよというような人であればやはりデータの受け渡し、データの処理をどうするかという部分がハードルになってくるのではないかと感じた。

ここをマスターすれば、また一歩前進できるのではないか!

今回作成したものはこちら。 https://github.com/hi629/pass-data-ionic/tree/master