Angular：动态CSS行为

Question

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

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

模式是在应用程序本身中设置的（例如通过按钮设置）。

CSS的大多数其他部分在任何模式下通常都是相同的。

我该如何处理？

我可以在CSS中放置角度代码（例如ngIf）吗？

我不喜欢在模板中放置很多[ngClass]和ifs，因为它在这里描述为dynamic css class in angular。

我更喜欢集中处理-像用类标记任何帮助主题，用类标记任何管理主题，并使CSS对模式做出反应。

Answer 1

不可能将角度代码放入CSS中。但是您可以执行以下操作：

html：

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

css：

.firstClass span{
    color: red;
}

.secondClass span{
    color: green;
}