具有侧边菜单和标签的 ionic 3 应用程序

Question

我按照本教程创建了一个带有侧边菜单和标签的 ionic 3 应用程序link

一开始一切正常，这是我的应用程序：image1

image2

这是我的 app.component.ts 的代码：

export interface PageInterface {
  title: string;
  name: string;
  component: any;
  icon: string;
  index?: number;
  tabName?: string;
  tabComponent?: any;
}

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any = TabsPage;
  pages: PageInterface[] = [
    { title: 'Home', name: 'HomePage', component: HomePage, tabComponent: HomePage, index: 0, icon: 'home' },
    { title: 'Demandes', name: 'DemandesPage', component: DemandesPage, tabComponent: DemandesPage, index: 1, icon: 'body' },
    { title: 'Ajouter un trajet', name: 'AddTraject', component: AddtrajectPage, tabComponent:AddtrajectPage, index: 2, icon: 'create' },
    { title: 'Ajouter une demande', name: 'AddDemande', component: AdddemandePage, tabComponent:AdddemandePage, index: 3, icon: 'add' },
    { title: 'About', name: 'AboutPage', component: AboutPage, tabComponent: AboutPage,  icon: 'people' },
    { title: 'Contact', name: 'ContactPage', component: ContactPage, tabComponent: ContactPage,  icon: 'contacts' },
    { title: 'Special', name: 'SpecialPage', component: OtherPage, icon: 'shuffle' },
  ];

  @ViewChild(Nav) nav: Nav;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(page: PageInterface) {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

   // If tabs page is already active just change the tab index
    if (this.nav.getActiveChildNavs().length && page.index != undefined) {
      this.nav.getActiveChildNavs()[0].select(page.index);
    } else {
      // Tabs are not active, so reset the root page 
      // In this case: moving to or from SpecialPage
      this.nav.setRoot(page.component, params);
    }


  }

  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNavs()[0];

    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.name) {
      return 'primary';
    }
    return;
  }

}

而我的标签页只有四页，

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Trajets" tabIcon="car"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Demandes" tabIcon="body"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="+ trajet" tabIcon="create"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="+ demande" tabIcon="add"></ion-tab>
</ion-tabs>

问题是，例如，当我单击位于侧面菜单而不是选项卡中的联系人时，我得到了联系页面但没有选项卡。 我想知道如何在所有页面中包含选项卡。请大家帮忙。

Answer 1

这需要一些工作。

您的 ionic 应用程序有一个 nav 变量，它是全局变量，是您用于侧边菜单的变量。这个变量是 app.component.ts 中的nav。

此外，每个标签都有自己的NavController。您想要的是在活动选项卡的本地NavController上推送左侧菜单上单击的页面，而不是全局nav。

一种方法是将每个选项卡的navCtrl 存储在其构造函数的全局变量中：

constructor(navParams: NavParams, navCtrl : navCtrl) {
    this.tabNumber= //number of this tab;
    // Set the active tab based on the passed index from menu.ts
    Globals.navCtrls[this.tabNumber] = this.navCtrl;
  }

现在在 app.component.ts 中，你应该有类似的东西，而不是 setRoot：

 Globals.navCtrls[**number of active tab**].push(page.component, params);

如何定义全局变量？

创建一个新文件：config.ts，其中包含：

export var Globals = {
  //Nav ctrl of each tab page
   navCtrls : new Array( **Number of tab pages**),
}

然后在每个文件中：

import { Globals } from "path/to/config.ts";

简单但不完美的替代方案：

我看到您使用 setRoot 来显示一个新页面。而不是这个，你可以使用push:

this.nav.setRoot(page.component, params);

您仍然看不到标签，但至少您可以返回上一页。