css - 如何选择用于导航栏组件 Angular 6 的 css

Question

我有一个 Angular 6 应用程序，它根据用户在系统中的 Angular 色使用两种不同的样式表。

Angular 色 1 - 样式表 1 Angular 色 2 - 样式表 2

导航栏是一个独立的组件，是应用程序布局结构的一部分。

根据新要求，导航栏必须根据用户所拥有的 Angular 色进行不同的样式设置。

如您所见，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 色一时，背景为蓝色，如果他们担任 Angular 色二，则背景为红色。

虽然这并不理想，因为用户会下载这两种样式，但如果您想使用 Angular 的 styleUrls 装饰器，这是唯一的方法。

希望对您有所帮助!