Angular 2 routerLinkActive始终对基本路径有效

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] =“{exact：true}”

Answer 1

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

Answer 2

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

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