Question

我的导航栏有这个代码：

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

问题是HOME导航点始终获取类，因为/似乎始终处于活动状态。用一个小而简单的解决方案可以避免这种情况吗？

感谢您的帮助

编辑：

这是现在的解决方案：

[routerLinkActiveOptions] =＆＃34; {exact：true}＆＃34;

Answer 1

根据@TomRaine in this answer的建议，您可以将属性[routerLinkActiveOptions]="{ exact: true }"添加到元素中：

<nav>
  <a [routerLink]="['/']" 
      [routerLinkActive]="['nav-active']"
      [routerLinkActiveOptions]="{ exact: true }">
    HOME
  </a>
  ...
</nav>

Answer 2

这似乎是一个已知问题。这个帖子中详细介绍了一些解决方法： https://github.com/angular/angular/issues/8397

Angular 2 routerLinkActive始终对基本路径

2 个答案: