html - 如何让事件路线在我的导航栏上突出显示？

Question

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

导航

<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>

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