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