Angular 2/4 - routerLinkActive not working properl

2019-03-23 16:52发布

I have a problem with my routerLinkActive.

Here is two Gifs to explain.

  1. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works.

enter image description here

  1. When I click at first on the current route, the class isn't displayed.

enter image description here

Here is my 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>

Here is the tree of my route. (in red the component called)

enter image description here

and my route code:

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

and menuItem is:

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

Do you know what can be my problem?

EDIT:

I have tried:

absolute route. ie:

 path: '/home/dashboard'

with

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

and

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

And the result is the same. Not working.

EDIT2:

adding:

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

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

doesnt resolve the problem.

EDIT3:

The extension Augury says me that routerLink is true for the good route. But the class isn't activated in the DOM.

enter image description here

enter image description here

EDIT4:

So, I have done some exploration.

I have found that if I put my menuComponent (sidebar) in the parent root, that is working, I the active class is displayed (But I don't want to put it in the parent)

Moving the menu to the parent works.

EDIT5:

I have done a plunker of the situation... And the plunker works... I dont get it.

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

3条回答
欢心
2楼-- · 2019-03-23 17:01

So I have spend lot of time on this problem.

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

The thing is: That works with angular 2 but not angular 4.

I have found a hack for 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>

with:

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

EDIT ANGULAR 5 :

With Angular 5, the bug is gone!

查看更多
虎瘦雄心在
3楼-- · 2019-03-23 17:02

Try this :

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a>Home</a>
</li>
查看更多
唯我独甜
4楼-- · 2019-03-23 17:17

Looks like the HomeComponent is lazily loaded. You don't have to move your routes to root component. Just try to add the RouterModule to the root component.

More here

查看更多
登录 后发表回答