【Ionic】アプリにメニューを追加

Ionicでアプリにメニューを追加する方法についてまとめました。

## 【Ionic入門】アプリにメニューを追加

Ionicでアプリを作成するときにカスタムフォント(.ttf)を使いたい場合があります。
その手順は次のとおりです。

① ホームページのヘッダーに、トグルボタン（三本線）を追加します。

■src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

：
（省略）

menuToggleタグ・・・ディレクティブ付きのボタン

② 次にトグルボタンをタップしたときに表示されるメニューを追加していきます。

■src/app/app.html に記述

<ion-menu [content]="c1">
  <ion-header>
    <ion-toolbar>
      <ion-title>My Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openPage('option')">設定</button>
      <button menuClose ion-item (click)="openPage('bookmark')">お気に入り</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #c1 [root]="rootPage"></ion-nav>

[設定][お気に入り]メニューを追加しています。
また、それぞれタップすると、次に作成するページ「optionPage」「bookmarkPage」へそれぞれ飛びます。

③以下のコマンドで[設定][お気に入り]ページを作成します。

ionic g page optionPage
ionic g page bookmarkPage

④ ハンドラを記述します。

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 { OptionPage } from '../pages/option-page/option-page';
import { BookmarkPage } from '../pages/bookmark-page/bookmark-page';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(name: string){
    switch(name){
      case 'option':
        this.nav.setRoot(OptionPage);
        break;
      case 'bookmark':
        this.nav.setRoot(BookmarkPage);
        break;
    }
  }
}

⑥ ルートモジュールに各ページモジュールを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { OptionPageModule } from '../pages/option-page/option-page.module';
import { BookmarkPageModule } from '../pages/bookmark-page/bookmark-page.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    OptionPageModule,
    BookmarkPageModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

⑦ ホームページ（HopePage）以外にもトグルボタンを設置します。

⑧　以上。