ionic 画面遷移とトグルメニュー

ionicについて勉強をはじめました。
画面遷移とトグルメニューについて自分なりに纏めました。

画面遷移の方法について

Terminalでカレントディレクトリをページを追加したいプロジェクトに移動します。
移動後、Terminalから以下のコマンドを実行します。
('next'は例です。)

$ ionic g page next

ルートモジュールに作成したモジュールをimportします。

app.module.ts

import { NextModule } from '../pages/next/next.module';
(省略)
@NgModule({
  declarations: [
  imports: [
    (省略),
    NextModule
  ],

後は、呼び出し側を設定します。
まずは呼出側の画面に、画面遷移用のボタンを追加します。

呼出側.html

import { NextPage } from '../next/next';
(省略)
<button ion-button (click)="onClick()">画面遷移</button>

ボタンから呼び出される画面遷移用のメソッドを追加します。

呼出側.ts

  onClick(){
    this.navCtrl.push(NextPage);
  }

これで、呼出側の画面からボタンを押下した際、画面遷移します。

トグルメニューの追加について

ionicのdocを見ると<ion-header>-<ion-navbar>の中に以下コードを追加しています。

sample.html

<button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
</button>

しかし、Sampleコードをコピペしてもトグルメニューが反映（表示）されませんでした。
そのため、ionicのdocで類似のやり方として記載してある<ion-toolbar>を使用して実装することにしました。

sample.html

<ion-toolbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>めいん</ion-title>
</ion-toolbar>

ちなみに'ionicons'についてはここを参照してください。

サイドバーの設定と画面遷移

ここでは、サイドバーのメニューの表示とクリックされた際の画面遷移について記載します。
まずは、サイドバーの設定をします。

app.html

<ion-menu [content]="c1">
  <ion-header>
    <ion-toolbar>
      <ion-title>さいどばーめにゅー</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="onClick('1')">１つめ</button>
      <button menuClose ion-item (click)="onClick('2')">２つめ</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #c1 [root]="rootPage"></ion-nav>

次に、クリックされたときの動作を指定します。

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
(省略)
import { NextPage } from '../pages/next/next';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav)nav:Nav;
(省略)
  onClick(strNumber:string){
    if(strNumber==='1'){
      // ページ遷移
      this.nav.setRoot(NextPage);
    }else{
      // 何もしない
    }
  }
}

上記の実装で、[１つめ]ボタンが押下された際に画面遷移します。
[２つめ]ボタンが押下された場合は何もしません。