如何获得当前活动标签名称内app.module在离子3

我的App有sidemenu +标签和结构类似于 https://devdactic.com/ionic-side-menu-tabs/如何获得当前活动标签名称内app.module在离子3

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>

来源

2017-10-13 Vanca

你可以尝试如下图所示。

export class TabsPage { 

@ViewChild('myTabs') tabRef: Tabs; 

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

}

您可以阅读更多关于it here。

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

来源

2017-10-13 05:54:55 Sampath

上面的代码将在TabsPage工作，但我想进去app.component的活动标签。 @Sampath我已经检查过您的个人资料，看起来您对Ionic 3有相当多的了解。我只是开始它，这是我的第一个应用程序。当您一起使用sidemenu +标签时，您是否遇到硬件backbuton无法正常工作的问题？我正在尝试解决这个问题，并且需要获取当前的活动页面。如果你知道，请让我知道。希望你能理解 – Vanca

你只需要在这里触发'Event'：通过该事件发送详细信息。 http://ionicframework.com/docs/api/util/Events/ – Sampath

类似的问题 https://stackoverflow.com/a/43811124 – Vanca

页/ 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()); 

     } 
    } 
}

来源

2017-10-14 11:24:37

如何获得当前活动标签名称内app.module在离子3

回答

相关问题