离子2：使用标签按钮中的图片 [英] Ionic 2 : Use picture in tab button

问题描述

我在我的应用程序中使用ion-tabs，我想在选项卡按钮中使用图片。
我想动态地设置这张照片。

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

这篇关于离子2：使用标签按钮中的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！