In my Angular 5 project I've got a bootstrap nav-bar menu. routerLinkActive
does work nicely when the start of the path matches the routerlink of the menu, like:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/entity/teacher']">Teacher</a>
</li>
the Code above activates the menu item nicely for `/entity/teacher/add' and more
Problem is, I've got a Kind of 'catch-all' navigation item which contains things which do not line up:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/config']">Configuration</a>
</li>
I want this item to highlight for the paths /tasks
and /entity/settings
, too, not only for /config
.
Problem is, I can't change the routing of the app. How do I get the menu item to line up for other routing paths as well as the one in the routerLink?
You can use a template reference variable to get a reference to the outer routes and then apply the class when they are active. You can either link them to an existing routerLinkActive element or to a hidden one. Here is an example using the hidden method.
<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>
If you're looking for how to prevent multiple links to gets active, there is a [routerLinkActiveOptions]="{exact: true}"
option:
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>
as specified there are multiple routerLinks
but only one routerLinkActive
show highlight or enabled.for that this works fine for me.
<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>
This works for me:
<li [routerLinkActive]="['active']">
<a routerLink="/config">Configuration</a>
<a routerLink="/tasks" style="display: none"></a>
<a routerLink="/entity/settings" style="display: none"></a>
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.