wake-up-neo.net

Angular 2/4 - routerLinkActive funktioniert nicht richtig

Ich habe ein Problem mit meinem RouterLinkActive.

Hier sind zwei Gifs zu erklären.

  1. Erstes Problem: Wenn ich die App starte, gibt kein RouterLinkActive die Klasse an. Aber wenn ich auf eine andere Route klicke, funktioniert das endlich.

 enter image description here

  1. Wenn ich zuerst auf die aktuelle Route klicke, wird die Klasse nicht angezeigt.

 enter image description here

Hier ist mein 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>

Hier ist der Baum meiner Route. (in rot die Komponente genannt)

 enter image description here

und mein Routencode:

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 {}

und menuItem lautet:

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: ''
}]

Wissen Sie, was mein Problem sein kann?

EDIT: 

Ich habe versucht:

absolute Route. dh: 

 path: '/home/dashboard'

mit 

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

und 

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

Und das Ergebnis ist das gleiche. Funktioniert nicht.

EDIT2:

hinzufügen: 

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

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

löst das Problem nicht.

EDIT3: 

Die Erweiterung Augury sagt mir, dass RouterLink für die gute Route zutrifft. Die Klasse ist jedoch nicht im DOM aktiviert.

 enter image description here

 enter image description here

EDIT4:

Also habe ich etwas erforscht.

Ich habe festgestellt, dass wenn ich meine menuComponent (Sidebar) in die übergeordnete Wurzel stecke, also die aktive Klasse angezeigt wird (Aber ich möchte sie nicht in die übergeordnete einfügen)

 Moving the menu to the parent works.

EDIT5:

Ich habe einen Plunker der Situation gemacht ... Und der Plunker funktioniert ... Ich verstehe das nicht.

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

16
Wandrille

Ich habe also viel Zeit mit diesem Problem verbracht.

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

Die Sache ist: Das funktioniert mit Winkel 2, aber nicht Winkel 4.

Ich habe einen Hack für Winkel 4 gefunden:

<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>

mit:

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

EDIT ANGULAR 5:

Mit Angular 5 ist der Fehler weg!

7
Wandrille

Versuche dies :

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

Sieht aus, als wäre die HomeComponent faul geladen. Sie müssen Ihre Routen nicht zur Stammkomponente verschieben. Versuchen Sie einfach, das RouterModule der Root-Komponente hinzuzufügen.

Mehr hier

0
Surender Kherwa