Ionic框架中的选定选项卡 [英] 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.

我的标签页:

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(感觉很多余)?

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)?.

谢谢！

推荐答案

最后我可以获取索引.

tabs.html

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

这篇关于Ionic框架中的选定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！