Угловой 6 установить цвет фона в HTML для переменной CSS

Question

Я использую Angular 6, и у меня есть простой div, и я хочу установить цвет фона этого div из шаблона.Это прекрасно работает при передаче нормальных цветов.Но это не работает с переменными CSS.

Этот пример работает

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

Этот пример не работает

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

Answer 1

Чтобы привязать свойство стиля к переменной CSS в шаблоне HTML, выражение переменной 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)";

См. этот стек для демонстрации.

Answer 2

Вы можете сделать это двумя способами

1. использовать трубу, которая получает строку и возвращает код цвета.

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

2. добавить в тег html динамический класс, например:

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

и в scss добавить опции

СКС:

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

Answer 3

Вы должны использовать ngStyle

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

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