Question

我遇到的问题是，当我同时使用这些时，使用侧边菜单导航时Tab导航会消失。

使用标签导航使应用程序的工作方式类似于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>

homepage.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>

Answer 1

首先，将tabIndex添加到List

List

然后，让你的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

Ionic 3选项卡导航+侧面菜单

1 个答案: