如何在导航栏上突出显示活动路线？

Posted 2023-02-22

【中文标题】如何在导航栏上突出显示活动路线？

【英文标题】：How do I get the active route to highlight on my navbar?

【发布时间】：2020-04-03 17:47:07

【问题描述】：

在 Angular 中，我试图确保我所在的页面在导航栏上突出显示 - 我认为这可能是我正在使用的引导导航的本机，但它似乎不起作用。

导航

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <a class="navbar-brand" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" [routerLink]="['/']" style="color:white"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" [routerLink]="['/results']" style="color:white"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" [routerLink]="['/links']" style="color:white"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
  </nav>

是否有 css 脚本或我可以用来实现此目的的东西？

【问题讨论】：

使用routerLinkActive属性，见angular.io/api/router/RouterLinkActive

这能回答你的问题吗？ In Angular, how do you determine the active route?

这能回答你的问题吗？ Angular5, setting active class for RouterLink

【参考方案1】：

您可以像这样使用RouterLinkActive 做到这一点：

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

更多关于here

【参考方案2】：

尝试使用routerLinkActive，它会在路由处于活动状态时为元素添加一个 CSS 类。

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
      <a class="navbar-brand" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" [routerLink]="['/']" [routerLinkActive]="['active']"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" [routerLink]="['/results']" [routerLinkActive]="['active']"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" [routerLink]="['/links']" [routerLinkActive]="['active']"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
</nav>

我建议删除您添加的颜色的内联 css，让 Bootstrap 使用类处理颜色。 active 应该适用于 nav-link，但请随意尝试。它们以数组的形式添加，因此您可以添加超过 1 个。

【参考方案3】：

您需要添加routerLinkActive 属性，该属性将在活动时将active 类添加到链接中。这个active 类可以具有您想要在特定链接处于活动状态时应用的样式。

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/']" style="color:white"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" style="color:white"><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" style="color:white"><fa-icon [icon]="faLink"></fa-icon>  Links</a>
  </nav>