Angular routerLinkActive用于多个路径-Java 学习之路

在我的Angular 5项目中，我有一个bootstrap导航栏菜单 . 当路径的开头与菜单的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中的路由路由对齐？

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>

回复于 2024-04-20T04:19:21+08:00

Angular routerLinkActive用于多个路径

1 回答

相关问题