多路径角routerLinkActive

Question

在我的角5项目中，我有一个引导导航条菜单。当路径的开始与菜单的路由链接匹配时，routerLinkActive确实工作得很好，例如：

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

上面的代码很好地激活了‘/entity/教师/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>

Answer 3

正如所指定的，有多个routerLinks，但只有一个routerLinkActive显示，突出显示或enabled.for，这对我来说很好。

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