先日、Ionicのプロジェクトで「この書き方は何だろう？」と引っかかり、プログラマに質問して「そんな機能が……！」と今更知ったので覚え書きです。
画面遷移の書き方が違う？
|
1 2 |
this.navCtrl.push(MyPage); // テンプレートとかで見たことある書き方 this.navCtrl.push('MyPage'); // 何だろうこの書き方・・・ |
プログラマからのお言葉↓
コンポーネント毎にモジュールファイルを作っているんで文字列としてコンポーネントのクラス名を指定していれば画面遷移が出来ます。
モジュールファイルを各コンポーネントで持っていると初期時に読み込みが少なくて済むんで、早く表示できると言ったメリットがあります。
Ionic3からはコンポーネントをコマンドラインから作ればモジュールも作られたような。。。
えっ……そうなの！？
IonicPage Module
IonicPageというものを使うそうです。
IonicPage – Ionic API Documentation – Ionic Framework
やってみましょう。
|
1 |
$ ionic start test sidemenu |
とりあえずsidemenuテンプレートで作成します。
|
1 |
$ ionic g page next |
nextというページを追加します。
するとnext.html、next.scss、next.tsと一緒にnext.module.tsというファイルが作られました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { NextPage } from './next'; @NgModule({ declarations: [ NextPage, ], imports: [ IonicPageModule.forChild(NextPage), ], }) export class NextPageModule {} |
next.tsもテンプレートで作ったhome.tsと違う・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; // IonicPageついてる @IonicPage() // IonicPage @Component({ selector: 'page-next', templateUrl: 'next.html', }) export class NextPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad NextPage'); } } |
それから、home.htmlにボタンを追加して遷移させてみると・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { ListPage } from '../list/list'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } gotoList() { this.navCtrl.push(ListPage); // テンプレートで作られたページ } gotoNext() { this.navCtrl.push('NextPage'); // ジェネレータで作ったページ } } |
で、できた〜〜〜〜
既にあるページにもIonicPageを適用させてみる
IonicPageを使っていなかったページに適用するためにやること
- ***.module.tsファイルを作成
- ***.tsにIonicPageに関連する記述を追加
- app.component.ts、app.module.tsからページの読み込み関係の記述を削除
- ページの指定を文字列に変更
つまり、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { HomePage } from './home'; @NgModule({ declarations: [ HomePage, ], imports: [ IonicPageModule.forChild(HomePage), ], }) export class NextPageModule {} |
こうして、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { IonicPage, NavController } from 'ionic-angular'; // IonicPage追加 //import { ListPage } from '../list/list'; 消す @IonicPage() // IonicPage追加 @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } gotoList() { this.navCtrl.push('ListPage'); // 文字列に } ・・・ } |
こうして、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import { Component, ViewChild } from '@angular/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; // import { HomePage } from '../pages/home/home'; 消す // import { ListPage } from '../pages/list/list'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = 'HomePage'; // 文字列に pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { this.initializeApp(); // used for an example of ngFor and navigation this.pages = [ { title: 'Home', component: 'HomePage' }, // 文字列に { title: 'List', component: 'ListPage' } ]; } ・・・ } |
こうして、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; // import { HomePage } from '../pages/home/home'; // import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ MyApp, // HomePage, // ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), ], bootstrap: [IonicApp], entryComponents: [ MyApp, // HomePage, // ListPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
こう。
ついでにこういう設定もできます
|
1 2 3 4 |
@IonicPage({ name: 'my-page', // 自分を意味する文字列を変更する segment: 'some-path' //パスを指定する }) |
この書き方だと、this.navCtrl.push('my-page');でlocalhost:8100/#/some-pathにジャンプします。
パスの#を取りたいときはapp.module.tsでIonicModule.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
