[英]Angular routerLinkActive for multiple paths
在我的 Angular 5 项目中,我有一个引导导航栏菜单。 当路径的开头与菜单的 routerlink 匹配时, routerLinkActive
确实可以很好地工作,例如:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/entity/teacher']">Teacher</a>
</li>
上面的代码很好地激活了“/entity/teacher/add”等菜单项
问题是,我有一种“包罗万象”的导航项,其中包含未排列的内容:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/config']">Configuration</a>
</li>
我希望此项目也突出显示路径/tasks
和/entity/settings
,而不仅仅是/config
。
问题是,我无法更改应用程序的路由。 如何让菜单项与其他路由路径以及 routerLink 中的路由路径对齐?
您可以使用模板引用变量来获取对外部路由的引用,然后在它们处于活动状态时应用该类。 您可以将它们链接到现有的 routerLinkActive 元素或隐藏的元素。 这是使用隐藏方法的示例。
<li routerLinkActive="active" [ngClass]="{'active': tasksActive.isActive || settingsActive.isActive }">
<a [routerLink]="['/config']">Configuration</a>
</li>
<a routerLink="/tasks" routerLinkActive #tasksActive="routerLinkActive" style="display: none"></a>
<a routerLink="/entity/settings" routerLinkActive #settingsActive="routerLinkActive" style="display: none"></a>
如果您正在寻找如何防止多个链接激活,可以使用[routerLinkActiveOptions]="{exact: true}"
选项:
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>
正如指定的那样,有多个routerLinks
但只有一个routerLinkActive
显示突出显示或已启用。因为这对我来说很好用。
<a class="nav-link" href="javascript:void(0)" routerLink='/rulesConfiguration' routerLinkActive='active' [ngClass]="{'active': createRules.isActive}"><i class="nav-icon fa fa-list-alt "></i>Rules Configuration</a>
<a class="nav-link" href="javascript:void(0)" routerLink="/createRules" routerLinkActive #createRules="routerLinkActive" style="display: none"><i class="nav-icon fa fa-list-alt "></i>Rules </a>
这对我有用:
<li [routerLinkActive]="['active']">
<a routerLink="/config">Configuration</a>
<a routerLink="/tasks" style="display: none"></a>
<a routerLink="/entity/settings" style="display: none"></a>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.