я проблема с моим роутером LinkActive.

Вот два гифки, чтобы объяснить.

Первая проблема: когда я запускаю приложение, ни один из 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 {}

и 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] = "{точный: правда}" для:

<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