Как выбрать, какой CSS использовать для компонента Navbar Angular 6

Question

У меня есть приложение angular 6, в котором используются две разные таблицы стилей в зависимости от роли пользователя в системе.

Роль 1 - Таблица стилей 1 Роль 2 - Таблица стилей 2

Навбар является отдельным компонентом и является частью структуры макетов приложения.

С новыми требованиями Навбар должен по-новому оформляться в зависимости от роли, которую имеет пользователь.

Как видите, styleUrls использует только один файл CSS.Есть ли способ использовать ngIF, а затем, если routerLink = / user1, используйте navbar.css, а если routerLink = / user2, используйте navbar2.css?

@Component({
    selector: 'jhi-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['navbar.css']
})

Спасибо

Answer 1

Насколько я понимаю, то, что вы ищете, недоступно.Это потому, что CSS компилируется в код компонента.Это означает, что ваш css находится в ваших скомпилированных js-файлах и распространяется на скомпилированный компонент.

Что я делаю, так это пространство имен моего css и сохраняю обе версии в одном файле, затем условно добавляю класс вверхний уровень для включения одного набора стилей или другого.

Например:

<!-- template.html -->
<div [ngClass]="{'role-one': roleOneActive, 'role-two': roleTwoActive}">
  <div class="another-class">Cool Code in Here</div>
</div>

Затем в вашем css:

.role-one .another-class {
  background-color: blue;
}

.role-two .another-class {
  background-color: red;
}

С этим, когда кто-то играет рольодин фон - синий, а если у них вторая роль, у него будет красный фон.

Хотя это не идеально, поскольку пользователи будут загружать оба стиля, это единственный способ, если вы захотите использовать Angular styleUrls decorator.

Надеюсь, это поможет!