[英]Angular5 - set color of div container dynamically
使用 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;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.