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

希望有帮助！

如何在导航栏组件Angle 6中使用哪个CSS

1 个答案: