RouterLinkActive funktioniert in ngFor

Question

wird jede JavaScript-Lösung akzeptieren, aber beste Antwort könnte man angular2

mit seinem Ich versuche, meine Navigationsleiste dynamisch auf einem API-Aufruf basierte.

Das Problem ist, ich möchte die Eltern li eine aktive Klasse haben, wenn ein anderes li (Kind) aktiv ist.

Der Code unten funktioniert, was ich will es tun sie aber nicht dynamisch

<nav> <ul> <li> <a (click)="togglePatientSideSearch()"><i class="fa fa-lg fa-fw fa-search"></i> <span class="menu-item-parent">Patient Search</span></a> </li> <li data-nav-target="1" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: false }"> <a (click)="toggleNavMenuParentSelected(1)" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Payroll</span> <b class="collapse-sign"> <em class="fa fa-plus-square-o"></em> </b> </a> <ul> <li [routerLinkActive]="['active']"> <a [routerLink]="['/payroll/summary']" title="Payroll Summary"><span class="menu-item-parent">Summary</span></a> </li> <li [routerLinkActive]="['active']"> <a [routerLink]="['/payroll/daily']" title="Payroll Daily"><span class="menu-item-parent">Daily</span></a> </li> </ul> </li> </nav> 

Der Code unten

laden ist, was nicht funktioniert, dass ich zu beheben versuche!

<nav> 
      <ul *ngIf="navigationMenu"> 
       <li *ngFor="let nav of navigationMenu; let i = index;" [attr.data-nav-target]="nav.logo && !nav.children ? null : i" [attr.routerLinkActiveOptions]="nav.logo && !nav.children ? null : { exact: false }" [attr.routerLinkActive]="nav.logo && !nav.children ? null : ['active']" > 
        <a *ngIf="nav.logo && !nav.children" (click)="navigationClicked(nav)"><i class="{{nav.logo}}"></i> <span class="menu-item-parent">{{nav.name}}</span></a> 
        <a *ngIf="nav.logo && nav.children" (click)="toggleNavMenuParentSelected(i)" title="Dashboard"> 
         <i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{nav.name}}</span> 
         <b class="collapse-sign"> 
          <em class="fa fa-plus-square-o"></em> 
         </b> 
        </a> 
        <ul *ngIf="nav.children"> 
         <li [routerLinkActive]="['active']" *ngFor="let child of nav.children;"> 
          <a [routerLink]="['/home']" title="Home"><span class="menu-item-parent">{{child.name}}</span></a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

Ich lade die gesamte Navigationsleiste zur gleichen Zeit in einem Objekt namens navigationMenu. Unten ist, wie ich es aussehen möchte, wie es ist, wenn es dynamisch geladen wird! (ignorieren verschiedene Namen)

Answer 1

Sie verwenden können:

[routerLinkActiveOptions]="{ exact: true }" 

mit:

routerLinkActive="active" 

ich die Lösung gefunden, die hier für mich gearbeitet :

https://github.com/angular/angular/issues/8397