Ionic2のページ間でのデータのナビゲートと受け渡し
Ionicでは、 NavController という名前のクラスを取得してページ間を移動し、NavParamsという名前のクラスを取得して移動元のページからデータを取得します。
まず、 NavController と、開始コンポーネント/ページでナビゲートするページのクラスをインポートします。
コンポーネント:something.ts
import { NavController } from 'ionic-angular';
import { SomethingElsePage }
from '../something-else/something-else';
次に、コンポーネントのクラスコンストラクターにNavControllerを挿入します。
コンポーネント:something.ts
constructor(public navCtrl: NavController) {}
そして今、あなたのページテンプレートに次のようなボタンがあるとしましょう:
テンプレート:something.html
<button ion-button (click)="goToSomethingElse()">
次に、コンポーネントには次のような goToSomethingElse()メソッドがあります。
コンポーネント:something.ts
goToSomethingElse() {
this.navCtrl.push(SomethingElsePage);
}
SomethingElsePageコンポーネントでは、NavControllerの pop を使用して、前のビューに戻ります。
コンポーネント:something-else.ts
goBack() {
this.navCtrl.pop();
}
NavParamsを使用したデータの受け渡しと取得
上記はすべて問題ありませんが、ナビゲートしているページにデータを渡したい場合がよくあります。 push呼び出しの2番目の引数にJSONオブジェクトとして渡すだけです。 以下のサンプルコードでは、payloadが渡すJSONオブジェクトになります。
コンポーネント:something.ts
goToSomethingElse(payload) {
this.navCtrl.push(SomethingElsePage, payload);
}
これで、宛先コンポーネント/ページで、NavParamsをインポートして挿入する必要があります。
コンポーネント:something-else.ts
import { NavController, NavParams } from 'ionic-angular';
...
そして最後に、NavParamsのgetメソッドを使用してデータにアクセスできます。 たとえば、ペイロードJSONオブジェクトを ketchup キーとして使用し、そのデータが必要だとします。
コンポーネント:something-else.ts
ketchup: string = this.navParams.get('ketchup');