Question

在角度上，我试图确保导航栏上突出显示我所在的页面-我认为这可能是我正在使用的引导导航所固有的，但似乎无法正常工作。< / p>

导航

<select
  ref="userInput"
  required
  className="form-control"
  value={this.state.make}
  onChange={this.onChangeMake}
>
  {this.state.makes.map(function(make) {
    return (
      <option key={make} value={make}>
        {make}
      </option>
    );
  })}
</select>

是否有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，但可以随时尝试。它们作为数组添加，因此您可以添加多个。

Answer 2

您需要添加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>

Answer 3

您可以使用RouterLinkActive来做到这一点，

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

有关此here

的更多信息

如何获得在我的导航栏中突出显示的有效路线？

3 个答案: