在我的 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 中的路由路径对齐？
最佳答案
您可以使用模板引用变量来获取对外部路由的引用，然后在它们处于事件状态时应用该类。您可以将它们链接到现有的 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>
关于用于多条路径的 Angular routerLinkActive，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49114399/