Css 如何使用angular 5基于导航栏的组件将特定类添加到导航栏

如何使用angular 5基于导航栏的组件将特定类添加到导航栏

基本上，我正在尝试创建一个Angular 5应用程序。现在，在这个应用程序中，我有多个组件，如

HomeComponent

，

AboutComponent

，

ContactComponent

。现在，我希望导航栏的背景在主组件中完全透明，但在其他组件中为黑色

我也在这个项目中使用Bootstrap4。所以在其他组件中，我只想将

bg primary

类添加到我的导航栏中，在home组件中，我只想删除该类和一些CSS样式

我怎样才能做到呢

这是我导航栏的代码

<nav class="navbar navbar-expand-lg navbar-dark text-uppercase bg-primary w-100 position-fixed">
    ........
    .......
</nav>

........
.......

可能有一种简单的方法可以做到这一点。如果导航栏中有一个链接到主组件的routerLink，则可以使用routerLink active指令确定路由当前是否处于活动状态

<a [routerLink]="['/home']" routerLinkActive #homeActive="routerLinkActive">

当主路由未激活时，将应用

bg主

类

如果我没有弄错的话，您必须确保您的主路线与

/

不同，否则RouterLink Active将适用于每个路线

---

有关该指令的更多详细信息，请参见中。

所有这些组件是如何关联的？它们是否各自包含导航条所在的组件作为其模板的一部分？您应该能够使用

NgClass

指令来实现这一点。查看这篇展示其使用案例的帖子：不，导航栏组件添加到主应用程序组件中，然后我使用路由器添加特定组件。您需要使用服务在这些组件和导航栏之间进行通信，以让它知道当前显示的是哪个组件。本文讨论了如何创建以这种方式通信的服务：

<nav class="..." [class.bg-primary]="!homeActive">