Angular vs Ionic Routingの違い

Ionicでアプリを開発する際にAngularのイメージで画面遷移を行おうとすると少し詰まります。

Angularの画面遷移

Angularではroutingモジュールにあらかじめrouteを登録しておいて、
普通にリンクを扱うのと同じ要領でタグにrouterLinkを設定してroutingを行います。
すると、以下のrouter-outletタグの位置に設定したページやコンポーネントが表示されます。

<router-outlet></router-outlet>

Ionicの画面遷移

IonicはデフォルトではAngularをベースに作られています。
なので、似ている、もしくは、同じ部分が多いのですが画面遷移をしたい場合は注意しなければいけません。

Ionicで画面遷移をするには

まず、遷移したいページの設定をします。
以下の例では、パラメーターを受け取るように設定しています。

@IonicPage({
  name: {任意の名前},
  segment: {任意の名前}/:{パラメータ} //任意
})

次に、ボタン等のイベントにより以下のコードが実行されるようにします。

this.navCtrl.push({読み込むページの名前}, {{パラメータ名}: {パラメータの値}})

これで、画面遷移ができるはずです。