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');