使用 AngularJS 效果很好:
<div style="width:10px;height:10px;background-color:{{user.color}}"></div>
但对于 Angular5 则不然。如何用 Angular5 做到这一点?
<div style="width:10px;height:10px;" [ngStyle]="{'background-color': user.color}">...</div>
或
<div [style.background-color]="user.color">...</div>
如何使用ngStyle
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element> <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element> <some-element [ngStyle]="objExp">...</some-element>
您可以使用 ngStyle 或 ngClass 动态执行此操作。
使用类而不是使用内联CSS。你可以使用 ngClass
[ngClass]="user.color"
在属性中传递类名。因此,如果您想在 css 中添加更多属性,那就更容易了。
要使用 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"> </div>
如果删除
它不起作用
在 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;
});
}