如何在Ionic 3的app.module中获取当前的活动选项卡名称

Question

我的应用程序具有侧面菜单+选项卡，其结构类似于https://devdactic.com/ionic-side-menu-tabs/

Menu.ts是我的应用程序的根目录，它位于我要加载“标签页”的模块内

我想在app.component的构造函数中获取当前的活动标签，并且尝试了以下方法和其他一些方法

this.nav.getActive().component
this.nav.getActive().component.tabRef.getSelected().root

like this
    this.app.viewDidEnter.subscribe((evt) => {
this.nav.getActive().component

    });

没有任何工作。 它总是返回TabsPage而不是当前活动的页面名称。

标签页

export class TabsPage {

  tab1Root: any = 'HomePage';
  tab2Root: any = 'ProductsPage';
  tab3Root: any = 'DynamicProductsPage';
  myIndex: number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex || 0;
  }

}

标签模板

<ion-tabs  #myTabs [selectedIndex]="myIndex" [color]="'primary'">
  <ion-tab [root]="tab1Root"  tabTitle="Home" tabIcon="ios-home" show=true  md="md-home"></ion-tab>
  <ion-tab [root]="tab2Root"  tabTitle="Products" tabIcon="ios-laptop" show=true md="md-laptop"></ion-tab>
</ion-tabs>

Answer 1

您可以尝试如下所示。

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  let tab:Tab = this.tabRef.getSelected();//Returns the currently selected tab
 }

}

您可以在此处了解更多信息。

如果您需要将此详细信息发送到app.component.ts则只需使用Events即可 。 使用Events您可以将上述详细信息（即tab ）发送到app.component.ts 。

Answer 2

页/ tab.ts

import { NavController, NavParams } from 'ionic-angular';
import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';
import { GlobalvarProvider } from "../../providers/globalvar/globalvar";

export class TabPage{

    tab1Root = Page1;
    tab2Root = Page2;

    parm1="page1";
    parm2="page2";

    constructor(private navParams: NavParams,private GlobalvarProvider: GlobalvarProvider){
        this.GlobalvarProvider.setActiveTab(navParams.get('index'));
    }

}

页/ tab.html

<ion-tabs color="secondary1" selectedIndex= {{index}} >
    <ion-tab [root]="Page1" [rootParams]="parm1" tabTitle="Page1" tabIcon="ff-lunch" ></ion-tab>
    <ion-tab [root]="Page2" [rootParams]="parm2" tabTitle="Page2" tabIcon="ff-lunch" ></ion-tab>
</ion-tabs>

供应商/ globalvar.ts

export class GlobalvarProvider {
    private active_tab:any;

    constructor(){
        this.active_tab=null;
    }

    setActiveTab(val){
        this.active_tab=val;
    }
    getActiveTab(){
        return this.active_tab;
    }
}

app.component.ts

import { GlobalvarProvider } from "../providers/globalvar/globalvar";
export class MyApp {

    constructor(private GlobalvarProvider: GlobalvarProvider){

    }
     initializeApp() {
        this.platform.ready().then((source) => {

        console.log(this.GlobalvarProvider.getActiveTab());

        }
    }
}