角度 - 色やスタイルをプログラムで参照することは可能ですか？

Question

私は、背景/境界線の色を変更するいくつかのアニメーションを備えたangular5アプリケーションを持っています。たとえば：

const blueStyle = style({background: "#0099ff", "border-color": "#0099ff"}); 
@Component({ 
animations: [ 
    trigger("animateOut", [state("true", blueStyle)]) 
] 
...}) 
export class MyComponent {...} 

色が変数としての私のSASSで定義されているので、私はそれらを参照するにはどのような方法があった場合不思議、代わりにここでそれらをハードコーディングされましたか？

Answer 1

はい！

あなたが行うことができますいくつかの方法があります。その

[スタイル]あなたのようなCSSプロパティを変更することができ、それを通して属性ディレクティブは

あり、以下の

// component html 
[style.color]="yourColorValue" 

// component class ts 
yourColorValue = 'red'; 

[クラス]

あなたは条件を定義することもできますあなたはそれらを変えることができます。複数のプロパティを持つことができるクラスとして複数のプロプラチを扱うことができます

// component html 
[ngClass]="isSomeCondition(frmt)? 'recommended' : 'normal'" 

// component css/scss file 
recommended: { 
    color: 'red'; 
} 
normal: { 
    color: 'blue'; 
}