web-dev-qa-db-ja.com

Angular 6 HTMLの背景色をCSS変数に設定

私はAngular 6を使用していて、単純なdivがあり、テンプレートの内側からこのdivの背景色を設定したいと思っています。これは、通常の色ですが、これはCSS変数では機能しません。

この例は機能します

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

この例は機能しません

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

あなたはngStyleを使用する必要があります

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

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

6
Gurvinder Guraya

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)";

デモについては this stackblitz を参照してください。

5
ConnorsFan

あなたは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;
     }
}
4
Matan Shushan