Angular：以编程方式设置复杂 css 选择器的样式

Question

我正在寻找一种以编程方式执行以下操作的方法：

tr.product-row:not(.expanded-row):active {
   background-color: red; <--this part will be calculated in my .ts file
}

原因是我希望活动颜色是不同元素颜色的较浅版本。我可以计算出我需要的颜色，但不知道如何设置。

可以用Renderer2做吗？

Answer 1

如何使用可以在模板中绑定的 CSS 变量：

CSS:

tr.product-row:not(.expanded-row):active {
   background-color: var(--some-var); // specify some variable
}

模板：

<!-- bind to that variable using directive against component property -->
<div [style.--some-var]="theVariableInComponentFile">foobar</div>

这是绑定到 CSS 变量的 example 操作。

希望对您有所帮助！

Answer 2

这可以通过指令来完成，指令的输入值是您计算的颜色然后renderer可以用来设置你传递的颜色

Angular: Programatically set style of complex css selector