IonicPageを使ってみる | 株式会社クオックス | QOX Inc. IonicPageを使ってみる – 株式会社クオックス | QOX Inc.

IonicPageを使ってみる

先日、Ionicのプロジェクトで「この書き方は何だろう?」と引っかかり、プログラマに質問して「そんな機能が……!」と今更知ったので覚え書きです。

画面遷移の書き方が違う?

プログラマからのお言葉↓

コンポーネント毎にモジュールファイルを作っているんで文字列としてコンポーネントのクラス名を指定していれば画面遷移が出来ます。
モジュールファイルを各コンポーネントで持っていると初期時に読み込みが少なくて済むんで、早く表示できると言ったメリットがあります。
Ionic3からはコンポーネントをコマンドラインから作ればモジュールも作られたような。。。

えっ……そうなの!?

IonicPage Module

IonicPageというものを使うそうです。
IonicPage - Ionic API Documentation - Ionic Framework
やってみましょう。

とりあえずsidemenuテンプレートで作成します。

nextというページを追加します。
するとnext.html、next.scss、next.tsと一緒にnext.module.tsというファイルが作られました。

next.tsもテンプレートで作ったhome.tsと違う・・・

それから、home.htmlにボタンを追加して遷移させてみると・・・

で、できた〜〜〜〜

既にあるページにもIonicPageを適用させてみる

IonicPageを使っていなかったページに適用するためにやること

  1. ***.module.tsファイルを作成
  2. ***.tsにIonicPageに関連する記述を追加
  3. app.component.tsapp.module.tsからページの読み込み関係の記述を削除
  4. ページの指定を文字列に変更

つまり、

こうして、

こうして、

こうして、

こう。

ついでにこういう設定もできます

この書き方だと、this.navCtrl.push('my-page');localhost:8100/#/some-pathにジャンプします。
パスの#を取りたいときはapp.module.tsIonicModule.forRoot(MyApp,{locationStrategy: 'path'})と設定します
(参照:Config - Ionic API Documentation - Ionic Framework

参考サイト

IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2) - Qiita
【ionic2】ionicPageで各画面をurlに対応させる - とりあえずphpとか
IonicPage - Ionic API Documentation - Ionic Framework

Pocket

The following two tabs change content below.
Yuko Hashimoto

Yuko Hashimoto

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。