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！