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

这是它的外观

这是它在开发工具中的外观 和我的地址栏

我是否遗漏了什么，因为我正在按照角度文档中的说明进行操作。

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 确实对当前路由进行了分块，并尝试将其部分与您提供的 RouterLinks 匹配。考虑到这一点，路由/将在任何地方匹配，因为它是所有其他路由的父级（如/about,/contact等，因为它由/+组成route-path）。为了简化，这不是一个错误，它有时是您的应用程序中匹配多个路由所需的功能。为防止这种情况，您可以指定routerLinkActiveOptions以与您所在的路线完全匹配。这意味着它不会匹配父路由，而只会尝试找到为该确切路由提供的 routerLink。