RouterLinkActive für RouterLink mit Parametern (/ dynamic)

Question

RouterLinkActive funktioniert nicht, wenn ein dynamisch generierter Link beim Navigieren durch die App selbst verwendet wird.

z.B. In meiner Top-Navigation habe ich das;

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a> 

Während die hardcoded Version funktionieren würde.

<a [routerLink]=['user','bob']>View Bobs Account</a> 

Ein Plunk für dieses ist hier; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

Klicken Sie auf "John" und "Dynamic Router Link Name =" und "John" sollte beide aktiv sein. Dies funktioniert manchmal beim ersten Klick, wenn dies der Fall ist, dann klicken Sie wieder auf "Home", der Klick erneut auf "John". Sie sehen nur den hartcodierten Link als aktiv registriert, obwohl die hrefs identisch sind.

Ist dies geplant/unmöglich? oder setze ich etwas falsch?

Answer 1

Ihre HTML ändern, wie unten:

import {Router} from '@angular/router'; 

isActive(instruction: any[]): boolean { 
    // Set the second parameter to true if you want to require an exact match. 
    return this.router.isActive(this.router.createUrlTree(instruction), false); 
} 

in Ihrem HTML:

<a [class.active]="isActive(['user', currentUser.name])"> 

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a> 

Sie auch Why Angular2 routerLinkActive sets active class to multiple links?

Answer 2

In Ihrer Komponente überprüfen Router.isActive() documentation on angular.io

Answer 3

routerLinkActive wird beim ersten Laden und nur bei Änderung der Route ausgewertet. Es wird nicht erneut ausgewertet, wenn die Verknüpfung geändert wird. Daher funktionieren dynamisch generierte Links nicht mit routerLinkActive. Die obige Lösung von Victor Bredihin funktioniert, da die Komponentenfunktion beim Rendern ausgewertet wird.