如何在Angular中绑定CSS 4自定义属性？

Question

随着CSS 4中自定义属性的引入，我想要在Angular中绑定它们。

通常，我们会像这样使用自定义属性：

<div style="--custom:red;">
    <div style="background-color: var(--custom);">
        hello
    </div>
</div>

然而，当使用Angular的绑定机制时，它不会导致红色矩形的出现：

<div [style.--custom]="'red'">
    <div style="background-color: var(--custom);">
        hello
    </div>
</div>

那么我应该如何绑定自定义属性呢？

- Chris Smith

---

你可以尝试使用Sass。但是你有没有考虑过使用CSS类来包含--custom... - JGFMK

@JGFMK Sass变量不像自定义属性那样传播。而且我需要绑定到Angular无法在样式表中完成的属性。 - Chris Smith

1. Sass vs自定义属性。2) 绑定无法在样式表中完成的Angular属性。你能详细说明一下吗？

- JGFMK

这是jQuery获取Sass变量...这是否是你想要的东西... - JGFMK

我需要Angular绑定属性，以便我可以通过REST API在运行时更新它们。Sass变量类似于宏，如果它们发生更改，则不会像自定义属性一样向下传播层次结构。 - Chris Smith

Answer 1

我认为目前您无法轻松地进行绑定，但是有一种解决方法。由于自定义属性受到级联的影响，您可以在组件中设置该属性，并在组件内部其他位置使用它。

constructor(
  private elementRef: ElementRef
) { }

ngOnInit() {
  this.elementRef.nativeElement.style.setProperty('--custom', 'red');
}

我从这里获取了信息https://github.com/angular/angular/issues/9343#issuecomment-312035896，但是渲染器的解决方案对我不起作用。

- subarroca