Ionic2 ion-tab为活动选项卡添加单击事件

Ionic2是Hybird开发的神器，组件化程度高且基于AngularJS2，TypeScript作为基础语言，编译特性友好。优点不一而足，但是，也有用起来不方便的地方，或者说是不能满足需求的地方。以ion-tabs为例，处于活动中的ion-tab选项卡是不响应任何点击事件的，这用起来就尴尬了。

有如下需求：处于APP首页的时候，点击"首页"(ion-tab)导航按钮实现首页的刷新。Ionic2是组件本身是无法实现该需求的，官方也没有明确的说法。

于是乎，通过一种hack的方式，实现了该需求：

export class TabsPage {
  tabHome: any = HomePage;  //首页tab
  selectedIndex: number = 0; //当前活动选项卡的index
  tabHomeClickEvent: any; //首页按钮点击事件
  constructor(public navCtrl: NavController, public events: Events) {
    let that = this;
    //定义点击事件
    this.tabHomeClickEvent = function(e) {
      //首页处于活动状态
      if(0 == that.selectedIndex){
         //do some thing     
      }
    }
  }
  // 给ion-tabs添加change事件 - ionic行为
  // <ion-tabs (ionChange)="tabChange($event)"> 
  tabChange(tab: Tab){
    this.selectedIndex = tab.index;
    console.log(this.selectedIndex);
    //活动选项卡索引为0的时候添加相应的click事件，否则删除事件
    if(0 == this.selectedIndex){
      this.tabHomeAddClickEvent();
    }
    else{
      this.tabHomeRemoveClickEvent();
    }
  }


  //ion-md-home 为首页选项卡图标的 ClassName, 通过javascript绑定click事件
  private tabHomeAddClickEvent(): void {

    let that = this;
    let tabHomeIcon = document.getElementsByClassName('ion-md-home');
    if(tabHomeIcon.length == 1){
      tabHomeIcon[0].addEventListener('click', that.tabHomeClickEvent, true)
    }

  }

  //ion-md-home 为首页选项卡图标的 ClassName, 通过javascript清除click事件
  private tabHomeRemoveClickEvent(): void {
 
    let that = this;
    let tabHomeIcon = document.getElementsByClassName('ion-md-home');
    if(tabHomeIcon.length == 1){
      tabHomeIcon[0].removeEventListener('click',that.tabHomeClickEvent , true);
    }
 
  }  


}

用这种方式可以达到给活动的选项卡添加Click时间的目的。

GOOD LUCK！

Ionic2 ion-tab为活动选项卡添加单击事件

推荐阅读