如何獲得當前活動標籤名稱內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

回答

相關問題