Ionic组件之Menu，可以通过命令生成带菜单的模板

ionic start MyIonicProject sidemenu

<ion-menu [content]="mycontent"></ion-menu>

效果图

直接上代码

menus.ts

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


import { App, MenuController } from 'ionic-angular';
@Component({
    templateUrl:'menus.html'
})

export class Menus{
    private rootPage;
    private homePage;
    private catsPage;
    private dogsPage;
    constructor(app:App,menu:MenuController,navCtrl:NavController,navParams:NavParams){
        menu.enable(true);
        this.rootPage=HomePage;
        this.homePage=HomePage;
        this.catsPage=CatsPage;
        this.dogsPage=DogsPage;
    }
    ionViewDidLoad(){
        console.log('ionViewDidLoad MainPage');
    }
    openPage(p){
        this.rootPage=p;
    }
}

@Component({
    selector: 'page-cats',
    templateUrl: 'cats.html'
})
export class CatsPage {

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    ionViewDidLoad() {
        console.log('ionViewDidLoad CatsPage');
    }
}

@Component({
    selector: 'page-dogs',
    templateUrl: 'dogs.html'
})
export class DogsPage {

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    ionViewDidLoad() {
        console.log('ionViewDidLoad DogsPage');
    }
}

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

    constructor(public navCtrl: NavController) {

    }

}

menus.html

<ion-menu [content]="mycontent">

<ion-content>
    <ion-list>
        <button ion-item menuClose (click)="openPage(homePage)">
        Home
        </button>
        <button ion-item menuClose (click)="openPage(catsPage)">
        Cats
        </button>
        <button ion-item menuClose (click)="openPage(dogsPage)">
        Dogs
        </button>
    </ion-list>
</ion-content>

</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

这边[root]设置默认显示页面，#mycontent则匹配[content]="mycontent"

home.html

<ion-header>
    <ion-navbar>
        <ion-icon name="menu" menuToggle left></ion-icon>
        <ion-title>
            Home
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    home page
</ion-content>

dogs.html

<ion-header>
    <ion-navbar>
        <ion-icon name="menu" menuToggle left></ion-icon>
        <ion-title>
            Dogs
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    dog page
</ion-content>

cats.html

<ion-header>
    <ion-navbar>
        <ion-icon name="menu" menuToggle left></ion-icon>
        <ion-title>
            Cats
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    cat page
</ion-content>