Angular routerLinkActive用于多个路径

Question

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

<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中的菜单项？

Answer 1

您可以使用模板引用变量来获取对外部路由的引用，然后在它们处于活动状态时应用该类。您可以将它们链接到现有的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>

Answer 2

如果您正在寻找如何防止多个链接处于活动状态，有一个[routerLinkActiveOptions]="{exact: true}"选项：

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>