Angular 6将HTML中的背景色设置为CSS变量

Question

我正在使用Angular 6，我有一个简单的方法div，想div从模板内部设置它的背景色。通过正常颜色时，此方法效果很好。但这不适用于CSS变量。

这个例子有效

<div [style.background]="'red'">...</div>

这个例子不起作用

<div [style.background]="'var(--some-css-var)'">...</div>

Answer 1

您必须使用ngStyle

<some-element [ngStyle]="{'background-color': styleExp}">...</some-element>

https://angular.io/api/common/NgStyle

Answer 2

为了将样式属性绑定到 HTML 模板中的 CSS 变量，var(...)必须对 CSS 变量表达式进行清理。您可以定义自定义管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Pipe({
  name: 'safeStyle'
})
export class SafeStylePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: string): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(value);
  }
}

并在 HTML 模板中使用它：

<div [style.background-color]="'var(--some-css-var)' | safeStyle"></div>
<div [style.background-color]="bkColor | safeStyle"></div>

bkColor = "var(--some-css-var)";

有关演示，请参阅此 stackblitz。

Answer 3

您可以通过 2 种方式进行

1. 使用获取字符串并返回一些颜色代码的管道。

   <div [style.background-color]="someString | colorSetter"></div>
   

2. 向 html 标签添加一个动态类，例如：

   <div class="my-div" [class]="someClassName"></div>

并在 scss 中添加选项

scss：

.my-div{
    &.optoin1{
       background-color:red;
     }
&.optoin2{
       background-color:black;
     }
&.optoin3{
       background-color:green;
     }
&.optoin4{
       background-color:yellow;
     }
}