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

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

创建项目

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

ionic start tabsidemenu tabs --v2cd tabsidemenuionic serve -l

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

创建 sidemenu 子页面

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

ionic g page page1ionic g page page2

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

src/pages/page1/page1.html

      
         
            
               
      
       Page One
        
     
    
      
     
Ionic Menu Starter
  
     
    If you get lost, the docs will show you the way.  
  
     Toggle Menu
    

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

      
         
            
               
      
       Page Two
        
     
    
      
         
            
             {
   {item.title}}      
       
                {
   {item.note}}      
       
      
       
     
          You navigated here from 
      {
   {selectedItem.title}}  
     
    

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会看到如下代码:

      
         
      
             About    
        
     
    
    

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

      
         
            
       
        Menu
           
        
       
         
            
               {
   {p.title}}          
        
     
    
    
    

打开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 来的更简单, 只要理解了堆栈模式以及根节点的使用, 可以任意构建自己想要的导航模式.