Ionic 2: Verwenden Sie Bild in Tab-Taste

Question

Ich verwende Ion-Tabs in meiner App und ich möchte ein Bild in einem Tab-Button verwenden. Ich möchte dieses Bild dynamisch einstellen.

In meinem Fall habe ich ein Konto mit verschiedenen Benutzern verknüpft. Ich möchte mein Tab-Bild abhängig vom ausgewählten Benutzer ändern.

Ich habe dies:

und ich möchte dies:

Mein Code in meine Registerkarten:

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

Ich weiß nicht, wie Um das zu tun, eine Idee?

Answer 1

Endlich finde ich eine Lösung! Ich schreibe einfach in das erstellte DOM.

ich wie folgt aus:

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

Answer 2

gibt benutzerdefinierte Namen tabIcon wie

<ion-tab [root]="MenuPage" 
     tabsHideOnSubPages="true" 
     tabIcon="customicon" 
     tabTitle="Menu"> 
</ion-tab> 

und in CSS:

.ion-ios-customicon-outline, 
.ion-ios-customicon,.ion-md-customicon,.ion-md-customicon-outline { 
    content: url('imageurl'); 
} 

plunk