web-dev-qa-db-ja.com

Angularコンポーネントのスタイルタグで文字列補間を使用する方法は？

@Component({
  selector: 'app-style',
  template: `
    <style>
      .test {
        color: {{ textColor }}
      }
    </style>
  `
})
export class StyleComponent {
  textColor = "red";
}

これは機能していないようで、スタイルを動的にして特定のCSSクラスにする必要があります。これを行う方法は他にありますか？

cssstringangularstylesinterpolation
10
S. Johnson

コンポーネントがレンダリングされると、スタイルタグはページのヘッド要素に移動し、この要素内のangular構文は無視されます。

私が見つけた唯一の方法は、動的なスタイル要素を作成し、欲求スタイルを提供することです。

app.component.ts

  textColor = 'red';
  constructor(private el: ElementRef) {

  }

  ngOnInit() {

    let style: string = `
     .test {color :${this.textColor}; }
    `;

    this.createStyle(style);

  }

  createStyle(style: string): void {
    const styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(style));
    this.el.nativeElement.appendChild(styleElement);
  }

app.template.html

<span class="test">test</span>

stackblitzデモ

4
malbarmavi

このようなngStyleディレクティブを使用できます。

@Component({
  selector: 'app-style',
  template: `
   <ul>
      <li [ngStyle]="{color: textColor}">List Item</li>
   </ul>
  `
})
export class StyleComponent {
  textColor = "red";
}
3
Alperzkn

私も同じ問題に直面していました。私の場合、彼は色を変えていたxmlを使用し、アプリケーションのロード時にapiを呼び出してxmlを読み取ってJSONオブジェクトを取得しました。 PrimaryForeground、PrimaryBackground、PrimaryHoverなどのすべての要素の色を分類しました。jsonオブジェクトを取得したら、この変数の値を更新していました。

1
Krishna

[style.color]でカラースタイルにアクセスするか、スタイルシート[class]で定義済みのクラスを指定できます。

<div [style.color]="color">Style Test</div>
<div [class]="className">Class Test</div>

ここに実行例があります。

1
ibenjelloun

$ {}で試す

template: `
<style>
  .test {
    color: ${textColor}
  }
</style>

`

0
Fateh Mohamed

CSSを動的にロードしたい場合は、「簡単」にできます。最初の試み（アセットフォルダ「style1.css」と「style2.css」にある）は、app.component.htmlにのみ書き込みます

<link rel="stylesheet" [href]='myStyle'>
...rest of tags...

//In your app.component.ts
myStyle="assets/style1.css"

しかし問題は、「リソースURLコンテキストで使用されている安全でない値」というエラーが発生するため、Domsatinizerを使用する必要があることです。そう

あなたのapp.componentのような

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..

App.component.ts

import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class appComponent{
   myStyle="assets/style1.css"
   constructor(public sanitizer: DomSanitizer) {}
}
0
Eliseo