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

Question

我的 routerLinkActive 有问题。

这里放两张Gif来说明一下

第一个问题：当我启动应用程序时，routerLinkActive 的 none 激活 class。但如果我点击不同的路线，那最终会起作用。

当我第一次点击当前路线时，没有显示 class。

这是我的代码：

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

菜单项是：

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

结果是一样的。不工作。

编辑2：

添加：

[routerLinkActiveOptions]="{exact: true}" 至：

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

没有解决问题。

编辑3：

扩展 Augury 告诉我 routerLink 对于好的路由是正确的。但是 class 没有在 DOM.

中激活

编辑4：

所以，我做了一些探索。

我发现，如果我将我的 menuComponent（边栏）放在 parent 根目录中，那是有效的，我会显示活动的 class（但我不不想把它放在 parent)

编辑5：

我已经对这种情况进行了 plunker...而且 plunker 有效...我不明白。

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

Answer 1

试试这个：

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

Answer 2

HomeComponent 似乎是延迟加载的。您不必将路由移动到根组件。尝试将 RouterModule 添加到根组件。

更多

Answer 3

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

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

问题是：这适用于 angular 2 但不适用于 angular 4.

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

与：

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

编辑 ANGULAR 5 :

使用 Angular 5，错误消失了！

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

Angular 2/4 - routerLinkActive not working properly

routerlinkactive

routerlink

angular