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
Page One
Ionic Menu Starter
If you get lost, the docs will show you the way.
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
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
打开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 来的更简单, 只要理解了堆栈模式以及根节点的使用, 可以任意构建自己想要的导航模式.