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

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

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

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

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

Renderer2 能做到吗？

解决方法

如何使用可以在模板中绑定的 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>

这是一个 example 绑定到正在运行的 CSS 变量。

希望有帮助！

,

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