Ionic 3 选项卡导航 + 侧边菜单答案

【问题标题】：Ionic 3 Tab Navigation + side menuIonic 3 选项卡导航 + 侧边菜单
【发布时间】：2018-11-15 23:31:03
【问题描述】：

我遇到的问题是，当我同时使用这两者时，使用侧边菜单导航时选项卡导航消失。

使用选项卡导航使应用程序的工作方式类似于我假设的 SPA，因为页面已加载到视图中。但是，当我使用侧边菜单导航时，我会直接转到该页面，这绕过了标签导航的要点。

有没有办法让这两者一起工作？

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 { HomePage } from '../pages/home/home';
   import { Settings } from '../pages/settings/settings';
   import { Journeys } from '../pages/journeys/journeys';

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

   @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: 'Home', component: HomePage },
           { title: 'Settings', component: Settings },
           { title: 'Journeys', component: Journeys }
       ];

   }

   initializeApp() {
       this.platform.ready().then(() => {
           this.statusBar.styleDefault();
           this.splashScreen.hide();
       });
   }

   openPage(page) {
       this.nav.setRoot(page.component);
   }
 }

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>

Tabs.ts：

import { Component } from '@angular/core';


import { HomePage } from '../home/home';
import { Journeys } from '../journeys/journeys';
import { Settings } from '../settings/settings';




@Component({
   templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = Journeys;
  tab3Root = Settings;

  constructor() {

  }
}

Tabs.html：

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle='Home' tabIcon='ios-home'></ion-tab>
<ion-tab [root]="tab2Root" tabTitle='Journeys' tabIcon='ios-car'></ion-tab>
<ion-tab [root]="tab3Root" tabTitle='Settings' tabIcon='md-settings'></ion-tab>

主页.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>
       <ion-grid>
           <ion-row>
               <ion-col col-12>
                    <p class='homepage_placeholder'>Homepage Placeholder</p>
               </ion-col>
           </ion-row>
     </ion-grid>
 </ion-content>

【问题讨论】：

用源代码发布你的问题，没有办法弄清楚你实现的代码有什么问题。
如果您需要更多代码，请询问，谢谢。

标签： ionic-framework ionic3

【解决方案1】：

首先，将 tabIndex 添加到您的this.pages

this.pages = [
    { title: 'Home', component: HomePage, tabIndex:0 },
    { title: 'Settings', component: Settings, tabIndex:1 },
    { title: 'Journeys', component: Journeys, tabIndex:2 }
    { title: 'PageNotInTab', component: componentName }
];

然后，让你的openPage() 像这样

openPage(page): void{
    if(page.tabIndex){
      this.nav.setRoot(TabsPage,{selectedIndex:page.tabIndex})
    }else{
        this.nav.setRoot(page.component,{})
    }
}

当然，TabsPage 应该在实现上面的代码之前准备好。我省略了细节。

在TabsPage

ngAfterContentInit(){       
  if(this.navParams.data.hasOwnProperty("selectedIndex"))
    this._selectedIndex = this.navParams.get("selectedIndex")
  else
    this._selectedIndex=0;
}

【讨论】：