多条路径的角度路由器LinkActive [英] Angular routerLinkActive for multiple paths

问题描述

在我的 Angular 5 项目中，我有一个引导导航栏菜单.routerLinkActive 在路径的开头与菜单的 routerlink 匹配时效果很好，例如:

In my Angular 5 project I've got a bootstrap nav-bar menu. routerLinkActive does work nicely when the start of the path matches the routerlink of the menu, like:

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/entity/teacher']">Teacher</a>
</li>

上面的代码很好地激活了`/entity/teacher/add'等的菜单项

the Code above activates the menu item nicely for `/entity/teacher/add' and more

问题是，我有一种包罗万象"的导航项，其中包含不对齐的内容:

Problem is, I've got a Kind of 'catch-all' navigation item which contains things which do not line up:

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/config']">Configuration</a>
</li>

我希望此项目也针对路径 /tasks 和 /entity/settings 突出显示，而不仅仅是针对 /config.

I want this item to highlight for the paths /tasks and /entity/settings, too, not only for /config.

问题是，我无法更改应用程序的路由.如何让菜单项与其他路由路径以及 routerLink 中的路径对齐?

Problem is, I can't change the routing of the app. How do I get the menu item to line up for other routing paths as well as the one in the routerLink?

推荐答案

您可以使用模板引用变量来获取对外部路由的引用，然后在它们处于活动状态时应用该类.您可以将它们链接到现有的 routerLinkActive 元素或隐藏的元素.下面是一个使用隐藏方法的例子.

You can use a template reference variable to get a reference to the outer routes and then apply the class when they are active. You can either link them to an existing routerLinkActive element or to a hidden one. Here is an example using the hidden method.

<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>

这篇关于多条路径的角度路由器LinkActive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！