Ionic 2：在标签按钮中使用图片答案

【问题标题】：Ionic 2 : Use picture in tab buttonIonic 2：在标签按钮中使用图片
【发布时间】：2017-02-22 08:51:23
【问题描述】：

我在我的应用程序中使用离子标签，我想在标签按钮中使用图片。我想动态设置这张图片。

就我而言，我有一个与不同用户关联的帐户。我想根据所选用户更改我的标签图片。

我有这个：

我想要这个：

我的标签中的代码：

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

我不知道该怎么做，一个想法？

【问题讨论】：

请发布一些代码来演示您的尝试。
我更改了我的帖子。我不知道你需要什么才能更好地理解我想要做什么？

标签： javascript angular tabs ionic2

【解决方案1】：

给tabIcon 点赞

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

在css中：

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

plunk

【讨论】：

感谢它的工作！但是我怎样才能改变图片的大小呢？我尝试修改宽度，但没有效果。
如何动态更改图片网址？
你有没有想过如何更改图片的网址？
有人做过吗？如何更改图片网址（动态）
如果你愿意，我找到了解决方案。

【解决方案2】：

终于找到解决办法了！我只是写在创建的 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]);
      }
  }

【讨论】：

这不是在 Angular / Ionic 应用程序中与 DOM 交互的推荐方式。这可能会导致一些性能问题。
当然，我明白了。但我没有找到另一种方法来做我想做的事......
哦，好的。今天晚些时候，我将编辑您的答案并包括 ionic 方式 来做同样的事情:)
哦，我期待！ :D 这将是完美的。 ^^
@sebaferreras 你有没有找到这样做的“离子方式”？

【解决方案3】：

在您的 html 中：

<ion-tabs tabsHighlight="false" #myTab>
      <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>

在你的组件（ts）文件中：

import { ViewChild } from '@angular/core';
import {Tabs} from 'ionic-angular';
export class TabsPage {

  @ViewChild('myTab') tabRef: Tabs;
  constructor(public navCtrl: NavController) {

  }
  ngAfterViewInit() {
    let tabbar = this.tabRef._tabbar.nativeElement;
    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");
      img.setAttribute("src", 'https://picsum.photos/200');
      element.insertBefore(img, element.childNodes[1]);
    }

  }
}

在你的 scss 文件中：

.tab-icon-custom {
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    width: 50px;
    border-radius: 50%;
 }

【讨论】：