如何选择用于导航杆组件角度6的css

Question

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

角色1-样式表1角色2样式表2

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

对于新的需求，Navbar必须根据用户所具有的角色进行不同的样式设计。

如您所见，styleUrls只使用一个css文件。是否有一种使用ngIF的方法，如果routerLink =/user1 1使用navbar.css else，如果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;
}

这样，当某人有角色一，背景是蓝色的，如果他们有角色二，他们将有一个红色的背景。

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

希望这能帮上忙！