css - Angular:动态 CSS 行为

Question

我有一个可以在不同模式下运行的 Angular 6 应用程序。该模式确实对 CSS 有影响。

例如用户模式在有帮助主题的 div 周围有蓝色边框；管理模式在更改数据的按钮周围有红色边框； ...

模式在应用程序本身中设置(例如通过按钮)。

CSS 的大部分其他部分对于任何模式通常都是相同的。

我该如何处理？

我可以在 CSS 中放置 Angular 代码(例如 ngIf)吗？

我不喜欢在我的模板中放置大量带有 ifs 的 [ngClass]，因为它在此处描述:dynamic css class in angular .

我更喜欢集中处理——比如用类标记任何帮助主题，用类标记任何管理主题，并使 CSS 对模式使用react。

Answer 1

不可能将 Angular 代码放入 css 中。但是你可以这样做:

html:

<div [ngClass]="{'firstClass': isActive, 'secondClass': !isActive}">
    <span>Hello world</span>
</div>

CSS:

.firstClass span{
    color: red;
}

.secondClass span{
    color: green;
}