ionic3 搭建tabs+sidemenu組合

這是解決ionic3中側邊欄Menu加上底部Tabs的組合demo搭建，這是在ionic3的官網demo中的blank的基礎上搭建的組合。

1：下載blank，使用ionic start sidemenuTabs blank命令下載demo

遇到了錯誤，[email protected]的一個錯誤我們順便解決一下！

運行npm install -g [email protected] --registry https://registry.npm.taobao.org這個命令將[email protected]以全局的方式下載到本地，下載完成後就可以解決問題了！

注意！當你要繼續運行一下命令時你首先要將剛纔已經下載的sidemenuTabs文件刪除，不然會報錯！

繼續運行ionic start sidemenuTabs blank命令得到如下結果：

表示下載成功！

運行cd sidemenuTabs命令進入下載成功的demo中，

我們運行如下命令下載幾個page組件：

ionic g page tabs
ionic g page other
ionic g page about

ionic g page contact

這樣我們就下載了四個page組件！

打開demo的pages發現有五個組件包括home(默認下載)、tabs、other、about、contact。

修改src/app/app.component.ts文件如下

//根組件
import {Component, ViewChild} from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { OtherPage } from '../pages/other/other';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage:any = TabsPage;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();
      this.pages = [
        {title: 'Tabs Page', component: TabsPage},
        {title: 'Other Page', component: OtherPage}
      ]
    }

 initializeApp() {

    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  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);
  }
}

修改src/app/app.module.ts代碼如下

//根模塊  告訴ionic怎麼組裝應用

//引入angular和ionic的系統模塊
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

//ionic 打包app以後配置啓動畫面，以及導航條的服務（不用管 ）
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
//引入根組件
import { MyApp } from './app.component';


import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { OtherPage } from '../pages/other/other';

@NgModule({
  declarations: [ /*聲明組件*/
    MyApp,
    HomePage,
    TabsPage,
    AboutPage,
    ContactPage,
    OtherPage
  ],
  imports: [/*引入模塊 依賴的模塊*/
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],/*啓動的模塊*/
  entryComponents: [/*配置不會在模版中的組件*/
    MyApp,
    HomePage,
    TabsPage,
    AboutPage,
    ContactPage,
    OtherPage
  ],
  providers: [/*配置服務*/
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

修改src/app/app.html代碼如下

<ion-menu [content]="content">
  <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>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

修改src/pages/home/home.html代碼如下

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

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the  will be your guide.
  </p>
</ion-content>

修改src/pages/tabs/tabs.html代碼如下

<ion-tabs>
  <!--修改 Tabs，讓目錄結構清晰-->
  <ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab>
</ion-tabs>>

修改src/pages/tabs/tabs.ts代碼如下

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

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

/**
 * Generated class for the TabsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

  tabRoots: Object[];

  constructor(public navCtrl: NavController) {

    this.tabRoots = [{
      root: HomePage,
      tabTitle: 'Home',
      tabIcon: 'home'
    },{
      root: AboutPage,
      tabTitle: 'About',
      tabIcon: 'document'
    },{
      root: ContactPage,
      tabTitle: 'Contact',
      tabIcon: 'notifications'
    }
    ];
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TabsPage');
  }

}

這樣就可以組合menu+sidemenu的簡單demo了，由於我將所有修改的部分的代碼都粘貼出來了，所有就不發demo全部代碼了，本文是參考了http://www.ionic.wang/article-index-id-108.html並且結合官網的sidemenu與tabs進行我的一點改動而產生的。