I'm trying to make the h2 have a class of 'active' if the child link is routerLinkActive .
If looked at: Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?
and https://angular.io/api/router/RouterLinkActive
but neither have helped?
my code:
<ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
<div class="navGroup" *hasClaim="item.Claim">
<h2 class="acc_trigger" [class.active]="isActive" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
<ng-container *ngIf="item.MenuItem != null">
<div class="acc_container" >
<ul class="ulNav">
<li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
</ul>
</div>
</ng-container>
</div>
</ng-container>
according to the docs, it says you should be able to put the routerLinkActive on any ancestor of the link you're looking for (including a list of submenu links), so just adding routerLinkActive to the navGroup
:
<ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
<div class="navGroup" *hasClaim="item.Claim" routerLinkActive="active">
<h2 class="acc_trigger" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
<ng-container *ngIf="item.MenuItem != null">
<div class="acc_container" >
<ul class="ulNav">
<li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
</ul>
</div>
</ng-container>
</div>
</ng-container>
and making your h2 style more like
.navGroup.active>h2 { /* some styles for your active h2 */ }
should make it work. although i've seen lots of complaints that routerLinkActive has odd behavior, and they seem to keep changing it with each new version -- have you tried this way?
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.