我如何让活动路线高亮显示在我的导航栏上？

Question

在angular中，我试图确保我所在的页面在navbar上被高亮显示--我想这可能是我正在使用的自举nav的原生版本，但它似乎不起作用。

导航

<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脚本或我可以使用的东西来实现这一点？

Answer 1

尝试使用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>

我建议删除您添加的color的内联css，让Bootstrap用类处理颜色。active应该适用于nav-link，但可以随意进行实验。它们是作为数组添加的，因此可以添加1以上。