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

Question

我的routerLinkActive出现问题。

这里有两个GIF来解释。

1. 第一个问题：当我启动应用程序时，没有一个routerLinkActive给这个类激活。但是，如果我点击不同的路线，那最后的工作。

当我点击在第一电流路径上，不显示类。

这里是我的代码：

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

，结果是一样的。不工作。

EDIT2：

加入：

[routerLinkActiveOptions] = “{确切：真}” 来：

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

犯规解决该问题。

EDIT3：

扩展卜算说我routerLink是好航真。但该类未在DOM中激活。

EDIT4：

所以，我也做了一些探索。

我发现，如果我把我的MenuComponent中（边栏）在父根，也就是工作，我会显示活动类（但我不想把它的父）

EDIT5：

我已经做了的情况plunker ......而plunker工程...我不明白这一点。

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

Answer 1

所以我对这个问题花费大量的时间。

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

的事情是：

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

与角2，但没有棱角4.

我已经找到了4角一劈工程

EDIT ANGULAR 5：

随着Angular 5，错误消失了！

Answer 2

试试这个：

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

Answer 3

貌似HomeComponent被延迟加载。您不必将您的路线移至根组件。试着将RouterModule添加到根组件。

更多here