为什么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的外观 还有我的地址吧

我错过了什么,因为我正在按照角度文档中的解释.

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.