在 Angular 模板 HTML 中使用 css 变量？

Question

我有一个组件，它根据 json 文件中存储的值设置 div 的背景颜色，然后循环显示一堆颜色样本。

   <div class="color-swatch-color"
        [style.background-color]="foo"></div>

它与变量中的十六进制颜色配合得很好：foo="#f00";

但没有颜色显示我使用的颜色变量：foo = 'var(--primary)';

div 显示在 HTML 中，不会引发任何错误，但 div 上根本没有背景颜色。

更新

我应该更清楚。我有一个使用诸如 --primary、-- secondary （如 Bootstrap）之类的变量的主题。我想展示这些颜色的样本。但是，我在 CSS 类中使用变量，以便可以通过 body 标记上的“主题”类更改它们的值。

因此，我尝试将样本设置为变量，以便当用户更改 body 标记上的类时，样本会像我的应用程序的其余部分一样自动更改颜色。

看看这个 stackblitz。如果我直接分配变量，它会分配背景颜色。通过角度变量，它不分配任何颜色。

我这样做是因为如果你打开开发工具，你可以选择我的品牌颜色变量并即时更改它；这类似于切换主题，其中“brandcolor”可以改变访问主题

Answer 1

CSS 变量和 Angular

如果使用 Angular 版本 9+（或 8+ ...不确定），您可以执行以下操作：

[style.<css-variable>]="<value>"

例子：

<div [style.--my-color]="myValue">

div {
  background: var(--my-color)
}

很酷不是吗？而且也相当强大！

对于使用旧版本的人来说，也可以通过更多的代码来实现相同的目的：

在类构造函数中注入 DOMSanitizer 并像这样使用它：

<div [attr.style]="sanitizer.bypassSecurityTrustStyle('--custom: ' + value)">

Answer 2

编辑：这个怎么样？

https://stackblitz.com/edit/angular-kfeihc

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  bg = 'var(--brandcolor)';

  setStyle() {
    return {
      'background-color': this.bg
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  bg = 'var(--brandcolor)';

  setStyle() {
    return {
      'background-color': this.bg
    }
  }
}