Pourquoi routerLinkActive ne se déclenche-t-il pas si routerLink est associé?

Question

Dans mon application il y a plus d'une façon d'acheminer à une ressource particulière, par exemple, je me suis mie de pain afin de pouvoir naviguer plus librement à travers une hiérarchie des articles

SectionA > SectionB > SectionC 

où SectionA a id=1 et bientôt. En même temps, j'ai un routerLink dans mon menu latéral à l'élément actuellement sélectionné, qui dans l'exemple ci-dessus pointe vers SectionC (id=3). Je garde ces synchrone en émettant un événement lorsque quelqu'un clique sur un fil d'Ariane et la liaison puis le id de l'événement au routerLink dans mon menu latéral:

<li> 
    <a [routerLink]="['/section, section? section.id : 0]" [routerLinkActive]="['active']"></a> 
</li> 

De cette façon, si l'utilisateur navigue loin de ce composant qu'ils peuvent revenez au même état en cliquant simplement sur le bouton dans le menu latéral (au lieu d'avoir à naviguer vers la section cible à partir de zéro).

Cela ne fonctionne vraiment bien, cependant, si je navigue à travers les miettes de pain (et je suis donc en utilisant la liaison à section ci-dessus) routerLinkActive ne se déclenche pas bien l'URL actuelle et l'URL sur le bouton de menu latéral sont identiques. Ce n'est que si je clique directement sur le bouton du menu latéral que la classe active est appliquée, elle ne fonctionne pas via la liaison.

Cela fonctionne pour les URL sans paramètres (pas de liaison là-bas), donc je suppose que cela a à voir avec la vérification des changements d'Angular. Question: Est-ce que ce comportement est prévu et, dans l'affirmative, que dois-je faire pour que cela fonctionne quand même?

Answer 1

Il devrait être

<a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a> 

Parce qu'il est un directive

ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkActive]; 

Voir également la spécification d'un routerLinkActiveOptions si tel est le cas:

<a [routerLinkActiveOptions]="{exact: exact}" ...

Answer 2

Copié cette question et a marqué en tant que wiki puisque je ne suis pas t essayant de gagner le karma: https://stackoverflow.com/a/40528170/88066

1) dans votre composant

import {Router} from 'angular2/router'; 

isActive(instruction: any[]): boolean { 
    return this.router.isActive(this.router.createUrlTree(instruction), true); 
} 

2) dans votre html

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

Router docs on angular.io