Ionic2 tabs 导航与 sidemenu 导航结合使用方法

我们使用 ionic start -list 查看可用的启动器构建模板,最经常使用的就是 tabs 和 sidemenu,但是如果两种都想用呢(最近经常被人这么问...)?下面就做一个简单的步骤演示一下如何简单的结合两种导航方式.

创建项目

快速创建一个基于 tabs 模板的 Ionic 2 项目并以labs启动:

ionic start tabsidemenu tabs --v2

cd tabsidemenu

ionic serve -l

启动之后,可以看到当前项目是以 tabs 方式进行页面导航的,包含 Home,About,Contact 三个页面:

创建 sidemenu 子页面

使用构建命令快速创建两个页面组件 page1 和 page2:

ionic g page page1

ionic g page page2

然后快速修改一下这两个页面的html和ts文件内容:

src/pages/page1/page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost,the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

src/pages/page1/page1.ts

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

/*
  Generated class for the Page1 page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-page1',templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello Page1 Page');
  }

}

src/pages/page1/page2.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page Two</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event,item)">
      <ion-icon [name]="item.icon" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

src/pages/page1/page2.ts

import { Component } from '@angular/core';

import { NavController,NavParams } from 'ionic-angular';

/*
 Generated class for the Page2 page.

 See http://ionicframework.com/docs/v2/components/#navigation for more info on
 Ionic pages and navigation.
 */
@Component({
  selector: 'page-page2',templateUrl: 'page2.html'
})
export class Page2 {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string,note: string,icon: string}>;

  constructor(public navCtrl: NavController,public navParams: NavParams) {
    // If we navigated to this page,we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    // Let's populate this page with some filler content for funzies
    this.icons = ['flask','wifi','beer','football','basketball','paper-plane','american-football','boat','bluetooth','build'];

    this.items = [];
    for (let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,note: 'This is item #' + i,icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }

  ionViewDidLoad() {
    console.log('Hello Page2 Page');
  }

  itemTapped(event,item) {
    // That's right,we're pushing to ourselves!
    this.navCtrl.push(Page2,{
      item: item
    });
  }
}

并将其引入 app.module.ts :

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp,IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {Page1} from "../pages/page1/page1";
import {Page2} from "../pages/page2/page2";

@NgModule({
  declarations: [
    MyApp,AboutPage,ContactPage,HomePage,TabsPage,Page1,Page2
  ],imports: [
    IonicModule.forRoot(MyApp)
  ],bootstrap: [IonicApp],entryComponents: [
    MyApp,providers: []
})
export class AppModule {}

这样我们的 sidemenu 子页面就简单粗暴的准备好了.

创建 sidemenu 框架页面

项目中的 About 页面是空的,就拿这个页面开刀吧