Question

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

一开始一切都很好，这是我的应用程序：image1

这是我的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

这需要一些工作。

您的离子应用程序具有一个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);

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

ionic 3应用程序，带有侧面菜单和选项卡

1 个答案: