html - 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>