为什么Angular2 routerLinkActive将活动类设置为多个链接？

Question

我正在尝试将routerLinkActive应用到我的应用中，但我面临的问题是它将类设置为多个链接。这是我如何做到的

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

这是它的外观

这就是dev-tools的外观 我的地址栏

我错过了什么，因为我按照angular docs中的解释做了。

Answer 1

尝试将[routerLinkActiveOptions]="{exact: true}"设置为HTML，如下所示：

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

它是如何工作的？

RouterLinkActive会对当前路由进行分块，并尝试将其部分与您提供的RouterLink进行匹配。考虑到这一点，路线/将匹配在任何地方，因为它是所有其他路线的父亲（例如/about，/contact等，因为它由/组成+ route-path）。为了简化，它不是一个错误，它有时是您的应用程序中匹配多个路由所需的功能。为防止这种情况发生，您可以指定routerLinkActiveOptions以准确匹配您所在的路线。这意味着它不会匹配父路线，但只会尝试找到为这条路线提供的routerLink。