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

【问题标题】：changing css style dynamically from component in Angular 5从Angular 5中的组件动态更改css样式
【发布时间】：2018-06-05 10:51:34
【问题描述】：

我正在使用物化范围：

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

此输入在 HTML 跨度标签中创建带有类 thumb，我如何通过更改范围来动态更改颜色？是否可以在 css 中定义 .thumb {background-color: somevariable}，并从组件中更改它？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：