先日、Ionicのプロジェクトで「この書き方は何だろう？」と引っかかり、プログラマに質問して「そんな機能が……！」と今更知ったので覚え書きです。
this.navCtrl.push(MyPage); // テンプレートとかで見たことある書き方 this.navCtrl.push('MyPage'); // 何だろうこの書き方・・・
プログラマからのお言葉↓
コンポーネント毎にモジュールファイルを作っているんで文字列としてコンポーネントのクラス名を指定していれば画面遷移が出来ます。
モジュールファイルを各コンポーネントで持っていると初期時に読み込みが少なくて済むんで、早く表示できると言ったメリットがあります。
Ionic3からはコンポーネントをコマンドラインから作ればモジュールも作られたような。。。
えっ……そうなの！？
IonicPageというものを使うそうです。
IonicPage – Ionic API Documentation – Ionic Framework
やってみましょう。
$ ionic start test sidemenu
とりあえずsidemenuテンプレートで作成します。
$ ionic g page next
nextというページを追加します。
するとnext.html、next.scss、next.tsと一緒にnext.module.tsというファイルが作られました。
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と違う・・・
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にボタンを追加して遷移させてみると・・・
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を使っていなかったページに適用するためにやること
つまり、
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
declarations: [
HomePage,
],
imports: [
IonicPageModule.forChild(HomePage),
],
})
export class NextPageModule {}
こうして、
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'); // 文字列に
}
・・・
}
こうして、
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' }
];
}
・・・
}
こうして、
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 {}
こう。
ついでにこういう設定もできます。
@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
