Angular - 是否可以以编程方式引用颜色/样式？

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';
}