Angular 6，ngStyle 指令中 css 文件的颜色

Question

我想使用我的ngStyle指令（在 HTML 中）的 CSS 文件中定义的颜色。

这是我在 HTML 中得到的内容：

 [ngStyle]="{backgroundColor: isDarkStyle() ? '#29434e' : isNormalStyle() ? '#cfd8dc' : isLightStyle() ? 'white': ''}"

这是我的带有颜色的 CSS 文件：

//colors for background

$light-background: white;
$normal-background: #cfd8dc;
$dark-background: #29434e;

但我想要这个：

[ngStyle]="{backgroundColor: isDarkStyle() ? '$dark-background' : isNormalStyle() ? '$normal-background' : isLightStyle() ? '$light-background': ''}"

我怎样才能达到这个结果？感谢帮助 ：）

Answer 1

使用[ngClass]

请参阅 stackblitz：https://stackblitz.com/edit/hello-angular-6-refjye ?file=src%2Fapp%2Fapp.component.html

.light{
background: white;
}
.normal{
background: #cfd8dc;
}
.dark{
background: #29434e;
}

在 HTML 中

<p [ngClass]="isDarkStyle() ? 'dark' : isLightStyle() ? 'light': isNormalStyle()?'normal':''">
  Start editing to see some magic happen :)
</p>