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');
}