离子框架中的选定选项卡

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