Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么Angular2 routerLinkActive将活动类设置为多个链接?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将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。

大佬总结

以上是大佬教程为你收集整理的为什么Angular2 routerLinkActive将活动类设置为多个链接?全部内容,希望文章能够帮你解决为什么Angular2 routerLinkActive将活动类设置为多个链接?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: