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變量，必須清理CSS變量表達式var(...) 。 您可以定義自定義管道：

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

你可以用兩種方式做到這一點

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