Ionic2 tabs 导航与 sidemenu 导航结合使用方法
Ionic2 tabs 导航与 sidemenu 导航结合使用方法我们使用 创建项目快速创建一个基于 tabs 模板的 Ionic 2 项目并以labs启动: ionic start tabsidemenu tabs --v2 cd tabsidemenu ionic serve -l 启动之后,可以看到当前项目是以 tabs 方式进行页面导航的,包含 Home,About,Contact 三个页面:
创建 sidemenu 子页面使用构建命令快速创建两个页面组件 ionic g page page1 ionic g page page2 然后快速修改一下这两个页面的 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 }); } } 并将其引入 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 页面是空的,就拿这个页面开刀吧 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |