web-dev-qa-db-ja.com

angular template？

angular 5アプリケーションに取り組んでおり、テンプレートのスタイルタグに動的なCSSを適用する必要があります。いくつかのソリューションを試しましたが、動作していません。

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

ブラウザでcustom_cssクラスを調べると、スタイルが表示されます

.custom_css{
   color: {{customCss.color}};
}

どんな助けも大歓迎です。

javascripthtmlcssangularangular5
10
Lakhvir Singh

[ngStyle]ディレクティブを使用できます。

<span [ngStyle]="{'color': 'red'}">
 This is angular 5 application
</span>

またはそのように：

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

コンポーネント内：

applyStyles() {
    const styles = {'color' : 'red'};
    return styles;
}
7
ritaj

与えられた答えは、与えられたコンポーネントで変更する要素がほとんどない場合、ユーザーの選択に基づいて（そしてその場で）アプリの全体的なルックアンドフィールを変更する必要がある場合に機能します。次のようにjavascriptのcssをオーバーライドします。

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});
2
Thibaud Lacan

ところで、このように色を設定した場合：

_<div [style.color]="color"></div>
_

where color='var(--cssValue)' it 動作しません！

ただし、これは正しく機能します。

_<div [ngStyle]="{color: color}"></div>
_
0
Humberd

[style.customClass] =“ methodInComponent（）”を使用できます...

コンポーネントのメソッドがtrueを返す場合、これによりクラスが適用されます。

0
Paul