为什么 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>

这是它的外观

这是它在开发工具中的样子 还有我的地址栏

我是否遗漏了什么，因为我正在按照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 匹配。 考虑到这一点， route /将在任何地方匹配，因为它是所有其他路由的父级（如/about 、 /contact等，因为它由/ + route-path ）。 为简化起见，这不是错误，有时是应用程序中匹配多个路由所需的功能。 为了防止这种情况，您可以指定routerLinkActiveOptions以完全匹配您所在的路由。 这意味着它不会匹配父路由，而只会尝试找到为该确切路由提供的 routerLink。