Selected Tab in Ionic framework

问题

I want to display two tabs that will be used to display similar data, but the tabs will be used to filter the information.

My Tabs:

import { Component } from '@angular/core';
import { DataPage } from './DataPage';

@Component({
    template: `
      <ion-tabs>
        <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
        <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
      </ion-tabs>`
})
class MyApp {

    tab1: any;
    tab2: any;

    constructor() {
      this.tab1 = DataPage;
      this.tab2 = DataPage;
    }
}

The page:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({

})
class DataPage {

   constructor(public navCtrl: NavController) {
     //********************
     //Here I want to know which tab was selected
     //********************
     console.log("SELECTED TAB")
   }
}

When the DataPage is called I need to know from which tab was it initiated. Is there a way to find out which tab was selected or should I just duplicate the DataPage(it feels redundant)?.

Thank You!

回答1:

Use (ionChange) to catch when the user change the Tab. You can create a provider to get and set the active tab.

Tab.ts

import { Tabs, Tab } from 'ionic-angular';
import { Component, ViewChild} from '@angular/core';

@Component({
templateUrl: 'tabs.html'
})

export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs

  tab1: any = DataPage;
  tab2: any = DataPage;

  constructor(private tabService: TabsService) {
    this.configService.startConfigApp();

  }
  ionViewDidEnter(){
    let tab: Tab = this.tabRef.getSelected();
    this.tabService.setActiveTab(tab);
  }
  changeTab(){
    let tab: Tab = this.tabRef.getSelected().root.name; //or this.tabRef.getSelected().index;
    this.tabService.setActiveTab(tab);
  }
}

Tabs.html

<ion-tabs color="prime-grey" #myTabs (ionChange)="changeTab()">
  <ion-tab [root]="tab1Root" tab1="DataPage" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tab2="DataPage" tabIcon="pie"></ion-tab>      
</ion-tabs>

TabProvider.ts

import { Injectable } from '@angular/core'

@Injectable()
export class TabsProvider{
    private tabName: any;
    constructor(){}

    setActiveTab(tab: any){
        this.tabName = tab;
    }
    getActiveTab(){
        return this.tabName;
    }
}

Import the provider on your datapage.ts and use the IonViewWillEnter lifecycle to catch when the page is active.

DataPage.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TabsProvider } from '../path/to/your/provider'
@Component({

})
class DataPage {

   constructor(public navCtrl: NavController, private tabProvider: tabsProvider) {
     //********************
     //Here I want to know which tab was selected
     //********************

   }
   IonViewWillEnter(){
     console.log(this.tabProvider.getActiveTab())
   }

}

回答2:

Finally I am able to get index.

tabs.html

<ion-tabs  (ionChange)="tabChange($event)"> 
    <ion-tab [root]="tab1Root" tabTitle="Offers"  tabIcon="Offers" ></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Favourites"  tabIcon="Favorites"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Rewards"  tabIcon="Rewards"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Settings"  tabIcon="Settings"></ion-tab>
</ion-tabs>

tabs.ts

import { Tabs,Events,Tab} from 'ionic-angular';
  tabChange(tab:Tab){
        console.log(tab.index);
  }

来源：https://stackoverflow.com/questions/51748874/selected-tab-in-ionic-framework

标签

angular

typescript

ionic-framework

tabs

ionic3