从Angular 5中的组件动态更改CSS样式 [英] changing css style dynamically from component in Angular 5
本文介绍了从Angular 5中的组件动态更改CSS样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用物化范围:
<div class="range-field col s6">
<input type="range" id="test5" min="0" max="100" #ranger (input)="yourMethod(ranger.value)"/>
</div>
此输入使用类thumb在HTML span标签中创建,如何通过更改范围来动态更改颜色?是否可以在css .thumb {background-color:somevariable}中进行定义,然后从组件中进行更改?
This input creates in HTML span tag with class thumb, how could I change the color dynamically by changing the range? Is it possible to define in css .thumb {background-color: somevariable}, and change it from the component?
推荐答案
您可以通过组件中定义的变量在html中动态设置颜色.
You can dynamically set the color in html through a variable defined in the component.
<p [style.color]="variable"></p>
在component中定义变量的值.但是请确保已定义了默认值,否则它将引发错误.
define the value of variable in component. But make sure you have a default value defined otherwise it will throw an error.
这篇关于从Angular 5中的组件动态更改CSS样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文