ユーザ用ツール

サイト用ツール


ionicでページ遷移

Ionicでページ遷移

ページ遷移の方法として、Ionic3の時点では、以下の2通りの方法があります。他に、Angularのルーティングを用いる方法がありますが、多少面倒です。

goSecondPage() {
  this.navCtrl.setRoot(SecondPage);
}
goSecondPage() {
  this.navCtrl.push(SecondPage);
}

参考

https://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/

ionic CLIで

ionic start myApp blank

としてblankタイプのionicアプリを作成すると、デフォルトでは、

src/pages/home/home.html

の1ページのみとなっています。

こちらにSecondPageを追加し、HomePageからのリンクを貼る方法を紹介します。

3. Angularのルーティングを用いる方法

Ionic3の時点では、Ionic3にはルーティングはサポートされていませんが、Inoic4からサポートされるかもしれないとのことです。Ionic3でのAngularのルーティングの使用方法は、以下のリンク先をご覧ください。

https://www.joshmorony.com/using-angular-routing-with-ionic-4/

上記より先に、日本語で、Ionicより分かりやすい、Angularのルーティングの方法について先に学ぶとわかりやすいと思います。しかし、この記事に書いてあるIonic2の“DeepLinker”というものは、Ionic3には無さそうです。

https://qiita.com/kohashi/items/f424fb5dd897fc6317c9

リンク

ionicでページ遷移.txt · 最終更新: 2018/10/07 by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki