在 Ionic 2 中动态改变颜色答案

【问题标题】：Dynamically change color in Ionic 2在 Ionic 2 中动态改变颜色
【发布时间】：2018-07-16 16:36:37
【问题描述】：

基于某些条件，我正在尝试设置元素的颜色值。

所以，在我的 TS 文件中，我设置了一个名为 color 的变量

  if(this.value>0) this.color="#ffc000!important";

在我的 HTML 文件中，我尝试通过以下方式设置此颜色

<ion-icon name="notifications" [style.color]="color">

以及使用 ngstyle

<ion-icon name="notifications" [ngStyle]="{'color': color}">

这些都不起作用。我做错了什么或正确的方法是什么？

【问题讨论】：

您的颜色代码和!important 之间可能缺少空格，因此请使用this.color="#ffc000 !important"; 并再次检查
stackoverflow.com/questions/32495014/… -> 也许这对你有用。

标签： angular styles ionic2

【解决方案1】：

<ion-icon name="notifications" [color]="color">

希望这可行

【讨论】：

【解决方案2】：

.HTML 文件设置背景颜色的代码

<ion-col col-12 *ngFor="let item of newsArray" class="dir-col" >
          <div class="cell-dot" [ngStyle]="{'background-color': item.colorCode}"> 
     </div>
</ion-col>

.ts 文件代码，用于从 Web 服务设置动态颜色代码

  this.totalSearchRecord = data["TotalNewsRecords"]
      for (let news of data["records"]) {
        this.newsArray.push({
          newsId: this.serviceProvider.checkNull(news['id']),
          newsTitle: this.serviceProvider.checkNull(news['PressReleaseTitle']),
          newsDes: this.serviceProvider.checkNull(news['PressReleaseShortDes']),
          newsDate: this.serviceProvider.checkNull(news['PressReleaseDate']),
          newsMonth: this.serviceProvider.checkNull(news['PressReleaseMonth']),
          alias: this.serviceProvider.checkNull(news['Alias']),
          colorCode:'#FFFFFF',
        });
      }

【讨论】：

【解决方案3】：

Reference

当我们在name 中传递我们想要使用的图标名称时离子属性根据模式添加该图标的类。为了例如，如果你传递心脏：

<ion-icon name="heart"></ion-icon>

在 iOS 上是：

<ion-icon class="ion-ios-heart"></ion-icon>

对于材料设计模式，它将是：

<ion-icon class="ion-md-heart"></ion-icon>

这样我们就可以用类名给它们添加 CSS 属性了。

在你的 scss 文件中，

.ion-md-heart{
        color: red !important;
    }
.ion-ios-heart{
        color: red !important;
    }

希望这会有所帮助，它对我有用。

【讨论】：

【解决方案4】：

在 Angular 2 / Ionic 2 中，更改对象颜色的一种简单方法是使用 theme/variables.scss 文件。

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  my-special-color:   #ffcc55,
);

现在要在 ionic2 页面中动态更改颜色，您可以通过将颜色绑定到 HTML 部分中的变量

来实现

<button [color]="myBtnColor">MyButton</button>

在你的 TypeScript 部分

import { ..., ChangeDetectorRef, ... } from '@angular/core';
...
export class MyComponent {
  myBtnColor = "secondary"
  constructor(private changeDetectorRef:ChangeDetectorRef) {}
  ...
  function changeColorDynamicaly() {
    myBtnColor = "my-special-color";
    this.changeDetectorRef.detectChanges();
  }
  ...
}

在我的例子中，ChangeDetectorRef 用于查看视图中反映的实际更改。视图已失效，无法更新。

【讨论】：