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

发布时间：2020-12-17 08:01:01 所属栏目：安全来源：网络整理

导读：我正在尝试将routerLinkActive实现到我的应用程序，但我面临的问题是它将类激活到多个链接。这就是我在做的方式 ul class="nav nav-tabs" li role="presentation" [routerLinkActive]="['active']"a [routerLink]="['/']"Home/a/li li role="presentation" [

我正在尝试将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的说明进行操作。

尝试将[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。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!