Angular 2/4 - routerLinkActive无法正常工作

Question

我的routerLinkActive有问题.

这是两个GIF解释.

1. 第一个问题:当我启动应用程序时,routerLinkActive都没有激活该类.但如果我点击不同的路线,那最终会有效.

2. 当我首先点击当前路线时,不显示该类.

这是我的代码:

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

这是我路线的树.(红色称为组件)

和我的路线代码:

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

和menuItem是:

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

你知道我的问题是什么吗？

编辑:

我试过了:

绝对路线.即:

 path: '/home/dashboard'

同

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

和

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

结果是一样的.不工作.

EDIT2:

添加:

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

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

没有解决问题.

EDIT3:

扩展名Augury告诉我,routerLink对于良好的路由是正确的.但是这个类没有在DOM中激活.

EDIT4:

所以,我做了一些探索.

我发现如果我将menuComponent(侧边栏)放在父根中,那就可以了,我会显示活动类(但我不想把它放在父级中)

EDIT5:

我已经完成了这种情况的掠夺......而且那个掠夺者的工作......我得不到它.

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

Answer 1

试试这个 :

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

Answer 2

所以我花了很多时间在这个问题上.

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

问题是:它适用于角度2但不是角度4.

我找到了角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>

有:

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

编辑角5:

使用Angular 5,错误消失了!