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

正如@TomRaine在本回答中所建议的那样,您可以将属性添加[routerLinkActiveOptions]="{ exact: true }"到元素中:

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

Answer 2

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