【Ionic4】サイドメニュー付きプロジェクトの作成と既存プロジェクトへのサイドメニュー追加方法

投稿日: ziz

どうも

Zizの田中です！
今回はIonic 4でサイドメニュー付きプロジェクトの作成方法と既存プロジェクトへのサイドメニュー追加の方法を解説します。

動画で見たい方は下記をどうぞ！

サイドメニュー付きプロジェクトの作成方法

ionic start

プロジェクトを作成する場所でionic startする

project nameを入力すると

どのテンプレートを利用するか聞かれるので

「sidemenu」を選択する

重要ファイルの解説

重要なのが下記の2つ
app.component.html
app.component.ts

app.component.html

①:次に説明するapp.component.tsで定義した配列appPagesの要素数だけサイドメニューの中身表示

②:各ページのルートリンク

③各アイコン

④各ページのタイトル

app.component.ts

サイドメニューに表示するページはここで制御している

※〇数字はapp.component.htmlの数字と対応している

次に説明するが新規ページをサイドメニューに追加する場合はapp.component.tsの「appPages」配列を

変更する必要がある

（おまけ）新規ページをサイドメニューに追加する

新規ページ「menu1」を作成してサイドメニューに追加してみる

まずはターミナルからページ作成コマンドを入力して

ionic g page menu1

ページ作成後にapp.component.tsの「appPages」に下記のフォーマットに沿って追記

{
title:'任意のタイトル',
url:'ルートパス',
icon:'任意のアイコン名'
}

アイコンはこちらの公式ドキュメントから好きなものをどうぞ

（おまけ）ボタンでサイドメニューを開く

app.component.htmlの設定

app.component.htmlの「ion-menu」タグに「menuId」を追加

今回はid名をfirstとしているが任意のものでOK

ボタン設置ページ側の設定

ボタンを設置するhome.page.htmlのtsファイルhome.page.tsにサイドメニューを開く処理を追加

・home.page.ts側

まずはMenuCountrollerをインポートする

import { MenuController } from '@ionic/angular';

コンストラクタにmenuを定義する

constructor(private menu:MenuController) {}

サイドメニューを開くコードは下記

openFirst(){
this.menu.enable(true,'first');
this.menu.open('first');
}

・home.page.html側

ボタンを追加

<ion-button (click)="openFirst()">;openFirst()</ion-button>

既存プロジェクトへのサイドメニュー追加方法

既に作成済みのプロジェクトのページ3つ

menu1,menu2,menu3をサイドメニューに追加する

サイドメニューの作成

app.component.htmlを下記のように編集する

※menuIdを忘れずにつける

<ion-app>
  <ion-menu menuId="first" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>SIDEMENU</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
          <ion-item routerLink="/menu1">menu1</ion-item>
          <ion-item routerLink="/menu2">menu2</ion-item>
          <ion-item routerLink="/menu3">menu3</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="first" main></ion-router-outlet>
</ion-app>

サイドメニューを取り付けるページ側の設定

サイドメニューを表示したいページ（今回はhome.page.html）のヘッダー(内)に下記を追加する

    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

ヘッダーのソースは下記のようになる

（おまけ）ルーターリンクについて

クリックイベントを仕込んでts側でnavigationクラスを用いてページ遷移する方法もあるが
html側の修正だけでページ遷移したい方には今回利用した 「routerLink」がオススメ

基本的には下記のように書く

routerLink="リンクを飛ばしたいpath"

パスはapp-routing.module.tsの「path:」からリンクを飛ばしたいページを選ぶ

auto-hideについて

※2019/10/26追記

auto-hideをtrueにしておかないとページ遷移後に自動でサイドメニューを閉じてくれないのでとても使いにくくなってしまうので注意

ソースはこんな感じ

before( app.component.html )

<ion-app>
  <ion-menu menuId="first" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>SIDEMENU</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
          <ion-item routerLink="/menu1">menu1</ion-item>
          <ion-item routerLink="/menu2">menu2</ion-item>
          <ion-item routerLink="/menu3">menu3</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="first" main></ion-router-outlet>
</ion-app>

<ion-menu-toggle auto-hide = “true”> </ion-menu-toggle> で<ion-item>を挟んであげる

after( app.component.html )

<ion-app>
  <ion-menu menuId="first" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>SIDEMENU</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>

          <ion-menu-toggle auto-hide = "true"> //追加

          <ion-item routerLink="/menu1">menu1</ion-item>
          <ion-item routerLink="/menu2">menu2</ion-item>
          <ion-item routerLink="/menu3">menu3</ion-item>

          </ion-menu-toggle> //追加

      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="first" main></ion-router-outlet>
</ion-app>