时间戳

首页 > 解决方案 > 离子标签图标动态颜色

angular - 离子标签图标动态颜色

问题描述

我想根据从 api 更改的十六进制变量更改选项卡的图标颜色

我尝试使用 [ngStyle] 和 [ngClass] 元素并使用它们，但似乎没有任何帮助

  <ion-tab [root]="tab1Root" tabTitle="{{homeTitle}}" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{searchTitle}}" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab4Root"  tabIcon="options" ></ion-tab>
</ion-tabs>

<ion-tabs *ngIf="showKpi">
  <ion-tab [root]="tab1Root" tabTitle="{{homeTitle}}" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="{{kpiTitle}}" tabIcon="stats" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{searchTitle}}" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab4Root"  tabIcon="options" ></ion-tab>
```</ion-tabs>

I was able to change the background dynamically

标签： angularapiionic-frameworksass

解决方案

尝试：

[style.color]="myColor"

或者

[style.backgroundColor]="myColor"

以及来自 API 的颜色值：

this.myColor = 'valueFromAPI'

推荐阅读