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进行我的一点改动而产生的。