Angular: динамическое поведение CSS

Question

У меня есть приложение Angular 6, которое может работать в разных режимах.Режим оказывает влияние на CSS.

Например, пользовательский режим имеет синие границы вокруг div, которые имеют раздел справки;режим администратора имеет красные рамки вокруг кнопок, которые изменяют данные;...

Режим устанавливается в самом приложении (например, с помощью кнопки).

Большинство других частей CSS обычно одинаковы для любого режима.

Как я могу справиться с этим?

Могу ли я поместить угловой код (например, ngIf) в CSS?

Мне не нравится помещать много [ngClass] с ifs в мои шаблоны, как описано здесь: Динамический класс CSS в угловых .

Я бы предпочелцентрализованная обработка - как пометить любую тему справки с классом, пометить любую тему администратора с классом и заставить 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;
}