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,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Page1,
    Page2
  ],
  providers: []
})
export class AppModule {}

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

创建 sidemenu 框架页面

项目中的 About 页面是空的, 就拿这个页面开刀吧?.我们一共需要修改2个部分 about.html 和 about.ts.

打开src/pages/about/about.html会看到如下代码:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

这是一个普通页面结构, 我们需要将其修改为 menu 导航结构, 并为其设置 Click 事件:

<ion-menu [content]="menuContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #menuContent swipeBackEnabled="false"></ion-nav>

打开src/pages/about/about.ts则会看到如下代码:

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

import { NavController } from 'ionic-angular';

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

  constructor(public navCtrl: NavController) {

  }

}

我们要为其增加一些方法并引用之前的子页面:

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

import {NavController, Nav} from 'ionic-angular';
import {Page1} from "../page1/page1";
import {Page2} from "../page2/page2";

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  pages: Array<{title: string, component: any}>;

  constructor(public navCtrl: NavController) {
    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

}

此时我们的 About 页面就会变成一个 sidemenu 导航结构的页面:

到此一个 tabs 与 sidemenu 结合的导航模式就快速搭建好了. 我直接拿官方 starter 的代码扔了进去, 仔细看下都很好理解. Ionic2 的结合方式比 Ionic1 来的更简单, 只要理解了堆栈模式以及根节点的使用, 可以任意构建自己想要的导航模式.