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，错误消失了！

Answer 3

看起来HomeComponent是懒惰加载的。 您不必将路由移动到根组件。 只是尝试将RouterModule添加到根组件。

更多这里