如何选择 css 用于导航栏组件 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 并将两个版本存储在同一个文件中，然后有条件地在顶层添加一个 class 以打开一组或另一组样式。

例如：

<!-- 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 装饰器，这是唯一的方法。

希望对您有所帮助！

如何选择 css 用于导航栏组件 angular 6

How to choose between which css to use for navbar component angular 6

css

styling

angular

angular-router