在 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）等变量的主题。 我想展示带有 colors 的样本。 但是，我在我的 CSS 类中使用变量，以便我可以使用 body 标签上的“主题”class更改它们的值。

所以我试图将我的色板设置为变量，以便当用户更改身体标签上的 class 时，色板会像我的应用程序的 rest 一样自动改变颜色。

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

我这样做是因为如果您打开开发工具，您可以 select 我的品牌颜色变量并即时更改它； 这类似于切换主题，其中“brandcolor”可以随着主题而变化

Answer 1

除了var被 angular 编译器认为是危险的这一事实之外，OP 的 stackblitz 示例还有效。

这可以通过 DomSanitizer 绕过

public bg = this.sanitizer.bypassSecurityTrustStyle('var(--brandcolor)');
constructor(private sanitizer: DomSanitizer) {}

见https://stackblitz.com/edit/angular-kerk9q?file=src/app/app.component.html

Answer 2

您将需要内联 CSS 来使用 CSS vars 和 Angular 插值，我认为这将起作用：

这是使用 Angular 插值动态声明 CSS var inline 的示例

<!--HTML-->
<html style="--color: {{myAngularVar}}"> <!-- declare a variable inline use Angular interpolation the value of myAngularVar is imply string/text the browser will parse as CSS code -->

并使用基于 Angular 字符串/文本插值的变量，我使用 foo 因为这是您问题中 Angular 变量的名称

<!--CSS-->
<style>
    div.color-swatch-color {  
        background-color: var({{foo}}) //another example
    }
</style>

Answer 3

当通过 [style.--feat-image]=...' 或 [ngStyle]=“{'--feat-image': ... }” 绑定自定义 CSS 变量时，该属性将被 angular 忽略且未绑定。 这是为了避免安全问题。

如果您信任那些 styles 您可以执行以下操作：

1.创建一个pipe绕过styles（告诉Angular他们是值得信赖的）

@Pipe({name: 'safe'})
export class SafePipe {
    constructor(sanitizer: DomSanitizer){
        this.sanitizer = sanitizer;
    }

    transform(style) {
        return this.sanitizer.bypassSecurityTrustStyle(style);
    }
}

2. 在 html 中像这样使用 pipe

<div [style]="'--percentage: ' + percentage | sanitize"></div>

这在 Angular 8 中对我有用。

Answer 4

Css 变量和 Angular

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

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

例子：

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

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

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

对于使用旧版本的你们来说，同样可以通过更多的代码来实现：

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

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

Answer 5

编辑：这个怎么样？

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
    }
  }
}

<div class="swatch" [ngStyle]=setStyle()>{{bg}}</div>

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

问题描述

更新

5 个解决方案

解决方案1
3 2019-10-06 18:20:26

解决方案2
1 2019-10-06 17:24:10

解决方案3
0 2021-02-17 15:10:21

1.创建一个pipe绕过styles（告诉Angular他们是值得信赖的）

2. 在 html 中像这样使用 pipe

解决方案4
0 2021-06-22 19:25:38

Css 变量和 Angular

解决方案5
-1 2019-10-06 17:00:11

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

问题描述

更新

5 个解决方案

解决方案1 3 2019-10-06 18:20:26

解决方案2 1 2019-10-06 17:24:10

解决方案3 0 2021-02-17 15:10:21

1.创建一个pipe绕过styles（告诉Angular他们是值得信赖的）

2. 在 html 中像这样使用 pipe

解决方案4 0 2021-06-22 19:25:38

Css 变量和 Angular

解决方案5 -1 2019-10-06 17:00:11

解决方案1
3 2019-10-06 18:20:26

解决方案2
1 2019-10-06 17:24:10

解决方案3
0 2021-02-17 15:10:21

解决方案4
0 2021-06-22 19:25:38

解决方案5
-1 2019-10-06 17:00:11