Ionic框架中的選定選項卡

Question

我想顯示兩個選項卡，這些選項卡將用於顯示相似的數據，但是這些選項卡將用於過濾信息。

我的標簽：

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;
    }
}

這一頁：

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")
   }
}

調用DataPage時，我需要知道它是從哪個選項卡啟動的。 有沒有辦法找出選擇了哪個選項卡，還是我應該復制DataPage（感覺很多余）？

謝謝！

Answer 1

當用戶更改選項卡時，使用（ionChange）進行捕獲。 您可以創建一個提供程序來獲取和設置活動選項卡。

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;
    }
}

導入您的供應商datapage.ts和使用IonViewWillEnter生命周期趕上時，頁面被激活。

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())
   }

}

Answer 2

終於我可以得到索引了。

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);
  }