【ionic2】ionicPageで各画面をurlに対応させる

はじめに

ionic1のルーティングまわりはui-routerで検索すれば色々出て来たけどionic2で何で検索すればよいのかまだよくわかってないけどとりあえずやり方はわかったのでメモしておく。デバッグのときとかはブラウザでリロードしたいし。あれ、けど目的はそれくらい。。?

とりあえずHome →　Page1 → Page2 みたいな感じで画面遷移できるように。
それぞれ /#/home → /#/page1 → /#/page2 とURLもつようしてみる。　

app/app.component.ts

・・・
import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  //rootPage:any = HomePage;                                                                                                                                                                                       
  rootPage:any = 'home'; // ★ ココをあとでionicPageで指定する名前に変更                                                                                                                                           
                                                                                                                                                                                                                   
  ・・・
}

app/app.module.ts

・・・
@NgModule({
  declarations: [
    MyApp
    //HomePage                                                                                                                                                                                                     
  ],

  ・・・

  entryComponents: [
    MyApp
    //HomePage                                                                                                                                                                                                     
  ],

  ・・・

以降、各ページ

pages/home/home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

import { HomePage } from '../home/home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage)
  ],
  entryComponents: [
    HomePage
  ]
})
export class HomePageModule {}

pages/home/home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

import { Page1Page } from '../page1/page1';

@IonicPage({
  name: 'home'
})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  goPage1() {
    this.navCtrl.push('page1');
  }
}

page1、page2も同じように作ればNavControllerにpushするとurlも書き換わることが確認できた。以上です。