css - 如何使用 Angular 5 基于其组件将特定类添加到导航栏

Question

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

基本上，我正在尝试创建一个 Angular 5 应用程序。现在在这个应用程序中，我有多个组件，如 HomeComponent、AboutComponent、ContactComponent。现在我希望我的导航栏背景在主页组件中完全透明，但在其他组件中为黑色。

我也在这个元素中使用 bootstrap 4。所以在其他组件中，我只想将 bg-primary 类添加到我的导航栏和主页组件中，我只想删除该类和一些 CSS 样式。

我怎样才能实现它？

这是我的导航栏的代码

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

Answer 1

可能有一种简单的方法可以做到这一点。如果您的导航栏中有一个链接到您的主页组件的 routerLink，您可以使用 routerLinkActive 指令来查明该路由此时是否处于事件状态。

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

在第二部分 #homeActive="routerLinkActive" 中，您定义了一个模板变量，该变量为 true 或 false，具体取决于我们是否在主路线上。

然后在您的导航栏中，您可以使用该变量来控制类。

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

bg-primary 类将在主路由未激活时应用。

如果我没记错的话，您必须确保您的主路由与 / 不同，否则每条路由的 routerLinkActive 都为真。

参见the docs有关该指令的更多详细信息。