RouterLinkActive dla RouterLink z parametrami (/ dynamic)

Question

RouterLinkActive nie działa podczas korzystania z dynamicznie generowanego łącza podczas poruszania się po aplikacji.

np. w mojej górnej nawigacji mam to;

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

Podczas gdy wersja zakodowana na stałe by działała.

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

Pijak za to jest tutaj; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

Kliknij na "John" i "Dynamic Router Link Name =" i "John" powinny być aktywne. To czasami działa na pierwsze kliknięcie, jeśli tak, a następnie kliknij z powrotem na "Dom", kliknij ponownie na "John", zobaczysz tylko link zakodowany jest zarejestrowany jako aktywny, mimo że href są identyczne.

Czy jest to projektowane/niemożliwe? lub czy ustawiam coś niepoprawnie?

Answer 1

Zmień html jak poniżej:

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

Można również sprawdzić Why Angular2 routerLinkActive sets active class to multiple links?

Answer 2

W swojej części:

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); 
} 

w HTML:

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

Router.isActive() documentation on angular.io

Answer 3

routerLinkActive jest oceniany przy pierwszym ładowaniu i tylko po zmianie trasy. Nie jest ponownie oceniany po zmianie łącza. Dlatego dynamicznie generowany link nie działa z routeremLinkActive. Rozwiązanie Victora Bredihina powyżej działa, ponieważ funkcja komponentu jest oceniana podczas renderowania.