問題描述

我在我的應用程序中使用離子標簽，我想在標簽按鈕中使用圖片.我想動態設置這張圖片.

I use ion-tabs in my App and I want to use an picture in a tab-button. I want to set this picture dynamicly.

就我而言，我有一個與不同用戶關聯的帳戶.我想根據所選用戶更改我的標簽圖片.

In my case, I have an account with different users linked to it. I want to change my tab picture depending of the selected user.

我有這個:

我想要這個:

我的標簽中的代碼:

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

我不知道該怎么做，一個想法?

I don't know how to do that, an idea ?

推薦答案

終于找到解決方案了！我只是寫在創建的 DOM 中.

Finally I find a solution ! I just write in the created DOM.

我喜歡這樣:

updateAccountTab() : void {
      let array = document.getElementsByClassName('tabbar');
      let tabbar = array[0];
      let element = tabbar.childNodes[tabbar.childElementCount-1];
      if(element) {
          element.removeChild(element.childNodes[1]);
          let img = document.createElement("img");
          img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-md");
          img.setAttribute("src", this.pdata.user.profile_thumbnail);
          element.insertBefore(img, element.childNodes[1]);
      }
  }

這篇關于Ionic 2:在標簽按鈕中使用圖片的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！