css - 如何在 Angular 中绑定(bind) CSS 4 自定义属性？

Question

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

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

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

但是，当使用 Angular 的绑定(bind)机制时，它不会产生红色矩形:

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

那么如何绑定(bind)自定义属性呢？

Answer 1

我认为您目前不能那么简单地绑定(bind)，但是有一个变通办法。由于自定义属性受益于级联，您可以在组件中设置属性并在其中的其他地方使用它。

constructor(
  private elementRef: ElementRef
) { }

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

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