为什么 Angular2 routerLinkActive 将 active class 设置为多个链接？

Question

我正在尝试在我的应用程序中实施 routerLinkActive，但我面临的问题是它将 class 激活设置为多个链接。我是这样做的

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

为什么 Angular2 routerLinkActive 将 active class 设置为多个链接？

Why Angular2 routerLinkActive sets active class to multiple links?

routerlinkactive

angular

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

它是如何工作的？##