12

在我的 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 中的路径对齐？

4

4 回答 4

24

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

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

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>
于 2020-08-23T09:21:33.927 回答
0

正如指定的那样，有多个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>
于 2020-02-18T12:08:30.673 回答
0

这对我有用：

<li [routerLinkActive]="['active']">
    <a routerLink="/config">Configuration</a>
    <a routerLink="/tasks" style="display: none"></a>
    <a routerLink="/entity/settings" style="display: none"></a>
</li>
于 2021-11-22T12:30:31.667 回答