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