Angular5 - 动态设置div容器的颜色答案

【问题标题】：Angular5 - set color of div container dynamicallyAngular5 - 动态设置div容器的颜色
【发布时间】：2018-03-06 08:25:47
【问题描述】：

使用 AngularJS 效果很好：

<div style="width:10px;height:10px;background-color:{{user.color}}"></div>

但对于 Angular5，它不会。 Angular5怎么做？

【问题讨论】：

标签： angular angular5

【解决方案1】：

<div style="width:10px;height:10px;" [ngStyle]="{'background-color': user.color}">...</div>

或

<div [style.background-color]="user.color">...</div>

Docs

如何使用 ngStyle

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [ngStyle]="objExp">...</some-element>

【讨论】：

【解决方案2】：

您可以使用 ngStyle 或 ngClass 进行动态处理。

【讨论】：

【解决方案3】：

而不是使用内联 css 使用类。您可以为此使用 ngClass

[ngClass]="user.color"

在属性中传递类名。因此，如果您想在 css 中添加更多属性，那就更容易了。

【讨论】：

【解决方案4】：

要在 Ionic 5 中使用拾色器动态更改 div 的颜色：观看此视频以制作颜色选择器： https://youtu.be/g4rQBQDUSJY 然后执行以下操作：

在 HTML 中

<div id="picker"></div>
        <br/>
        <div>
          <ion-text>
            Color hex: {{colorCodeHEX}}
          </ion-text>
          <br/>
        </div>


<div [style.background-color]="colorCodeHEX">&nbsp;</div>

如果您删除了&nbsp;，它将不起作用

在 TS 中

import iro from '@jaames/iro';  



colorCodeHEX:string="";


 ngOnInit() {
    let ref = this;
    var colorPicker = iro.ColorPicker ("#picker",
    {width:this.width1,
      layout: [
        {
        component: iro.ui.Wheel,
        options: {}
        },
    ]
    });

    colorPicker.on('color:change',function(color)
    {
     ref.colorCodeHEX = color.hexString; 
    });
  }

【讨论】：