web-dev-qa-db-fra.com

Angular 2/4 - routerLinkActive ne fonctionne pas correctement

J'ai un problème avec routerLinkActive.

Voici deux gifs à expliquer.

  1. Premier problème: quand je lance l'application, aucun des routerLinkActive ne donne la classe active. Mais si je clique sur un autre itinéraire, cela fonctionne finalement.

 enter image description here

  1. Lorsque je clique d'abord sur l'itinéraire actuel, la classe n'est pas affichée.

 enter image description here

Voici mon code:

<ul class="nav">
   <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
       <a [routerLink]="[menuItem.path]">
           <i class="material-icons">{{menuItem.icon}}</i>
           <p>{{menuItem.title}}</p>
       </a>
   </li>
</ul>

Voici l'arbre de mon parcours. (en rouge le composant appelé)

 enter image description here

et mon code de route:

import ...

const routes : Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      }, ..., {
        path: 'challenges',
        component: ImageRankComponent
      }, {
        path: 'niveau',
        component: LevelComponent
      }, {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

et menuItem est:

this.menuItems = ROUTES.filter(menuItem => menuItem);
const ROUTES : RouteInfo[] = [{
    path: 'dashboard',
    title: 'Dashboard',
    icon: 'dashboard',
    class: ''
}, {
    path: 'challenges',
    title: 'Tous les challenges',
    icon: 'dashboard',
    class: ''
},
{
    path: 'niveau',
    title: 'Niveau en ligne',
    icon: 'dashboard',
    class: ''
}]

Savez-vous ce qui peut être mon problème?

MODIFIER: 

J'ai essayé:

itinéraire absolu. c'est à dire: 

 path: '/home/dashboard'

avec 

<a [routerLink]="menuItem.path">

et 

<a [routerLink]="[menuItem.path]">

Et le résultat est le même. Ne fonctionne pas.

EDIT2:

ajouter: 

[routerLinkActiveOptions] = "{exact: true}" à:

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">

ne résout pas le problème.

EDIT3: 

L'extension Augury me dit que routerLink est vrai pour le bon chemin. Mais la classe n'est pas activée dans le DOM.

 enter image description here

 enter image description here

EDIT4:

Alors, j'ai fait des recherches.

J'ai trouvé que si je mets mon menuComponent (barre latérale) dans la racine parent qui fonctionne, la classe active est affichée (Mais je ne veux pas le mettre dans le parent)

 Moving the menu to the parent works.

EDIT5:

J'ai fait un plunker de la situation ... Et le plunker fonctionne ... Je ne comprends pas.

https://plnkr.co/edit/7KMlY2

angularrouterlinkrouterlinkactive
16
Wandrille

J'ai donc passé beaucoup de temps sur ce problème.

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

La chose est: Cela fonctionne avec angular 2 mais pas angular 4.

J'ai trouvé un hack pour angular 4:

<li *ngFor="let menuItem of menuItems" [routerLinkActive]="" [ngClass]="rla.isActive?'active':''"  #rla="routerLinkActive"class="{{menuItem.class}}">
  <a [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
</li>

avec:

[routerLinkActive]="" [ngClass]="rla.isActive?'active':''"  #rla="routerLinkActive"

EDIT ANGULAR 5:

Avec Angular 5, le bug est parti!

7
Wandrille

Essaye ça : 

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a>Home</a>
</li>
8
Vignesh

On dirait que le HomeComponent est chargé paresseusement. Vous n'avez pas à déplacer vos routes vers le composant racine. Essayez simplement d’ajouter le RouterModule au composant racine.

Plus ici

0
Surender Kherwa