問(wèn)題描述

我在我的應(yīng)用程序中使用離子標(biāo)簽，我想在標(biāo)簽按鈕中使用圖片.我想動(dòng)態(tài)設(shè)置這張圖片.

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.

就我而言，我有一個(gè)與不同用戶關(guān)聯(lián)的帳戶.我想根據(jù)所選用戶更改我的標(biāo)簽圖片.

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.

我有這個(gè):

我想要這個(gè):

我的標(biāo)簽中的代碼:

    <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>

我不知道該怎么做，一個(gè)想法?

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

推薦答案

終于找到解決方案了！我只是寫在創(chuàng)建的 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]);
      }
  }

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