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