如何在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>

那么如何绑定自定义属性？

Answer 1

我认为您目前无法那么容易地绑定，但是有一个解决方法。由于自定义属性受益于级联，您可以在组件中设置属性并在组件内部的其他地方使用它。

constructor(
  private elementRef: ElementRef
) { }

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