从 Angular 5 中的组件动态更改 css 样式

Question

我正在使用物化范围：

<div class="range-field  col s6">
<input type="range" id="test5" min="0" max="100"  #ranger (input)="yourMethod(ranger.value)"/>
</div>

此输入使用类拇指在 HTML span 标签中创建，如何通过更改范围来动态更改颜色？是否可以在css .thumb {background-color： somevariable}中定义，并从组件中更改它？

Answer 1

您可以通过组件中定义的变量在 html 中动态设置颜色。

<p [style.color]="variable"></p>

定义组件中变量的值。但请确保定义了默认值，否则将引发错误。