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

【问题标题】：How to bind CSS 4 custom properties in Angular?如何在 Angular 中绑定 CSS 4 自定义属性？
【发布时间】：2018-01-05 02:07:14
【问题描述】：

随着 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>

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

【问题讨论】：

你可以试试 Sass。但是你有没有想过使用一个 CSS 类来包含 --custom...
@JGFMK Sass 变量不会像自定义属性那样传播。而且我需要绑定到 Angular 在样式表中无法执行的属性。
我没有让你的 cmets 在那里。 1) Sass 与自定义属性。 2) 绑定到 Angular 在样式表中不能做的属性。你能详细说明一下吗？
stackoverflow.com/a/11195043/495157 - 这无疑是 jQuery 获取 Sass 变量...是您所追求的那种东西...
我需要 Angular 绑定到属性，以便我可以在运行时通过 REST API 更新它们。 Sass 变量就像宏，如果它们像自定义属性一样发生变化，则不会向下传播。

标签： css angular

【解决方案1】：

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

constructor(
  private elementRef: ElementRef
) { }

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

【讨论】：