Спасибо за помощь, но, к сожалению, это не меняет результат.

я проблема с моим роутером 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

 Rahul Singh12 сент. 2017 г., 11:32
ты можешь попробовать[routerLink]="[/menuItem.path]"
 Kyrsberg12 сент. 2017 г., 11:31
Можете ли вы показать, как вы настроили свои маршруты?
 Matthew Allen12 сент. 2017 г., 11:55
Поскольку вы применяете активный класс к предку routerLink, вам может понадобиться[routerLinkActiveOptions]="{exact: true}" на элемент списка.Больше здесь.
 Wandrille12 сент. 2017 г., 11:42
Я отредактировал свою работу. /menuItem.path не работает.
 Debabrata12 сент. 2017 г., 11:33
попробуйте routerLink = "/ menuItem.path"

Ответы на вопрос(3)

Попробуй это :

li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    ;a>Home;/a>
;/li>
 Wandrille12 сент. 2017 г., 15:34
Уже пробовал, не работает, но спасибо
Решение Вопроса

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 ошибка исчезла!

 Omar08 мая 2018 г., 17:42
#rla=" как это называется?
 Wandrille12 окт. 2017 г., 00:15
@tishma Этот "хак" работает сегодня. Но это все еще взлом.
 Omar08 мая 2018 г., 16:51
@ Wandrille, можете ли вы сказать мне, где я могу прочитать больше о том, как проводить занятия наel a еслиel b встречает некоторую логику. (как ваш ответ) Я хочу видеть больше примеров, подобных этому
 Omar08 мая 2018 г., 16:39
Я многому научился из этого ответа. Спасибо
 tishma11 окт. 2017 г., 16:00
Извините, но ваш ответ - просто обходной путь. Это не имеет ничего общего с работой директивы routerLinkActive.

HomeComponent загружен лениво. Вам не нужно перемещать ваши маршруты в корневой компонент. Просто попробуйте добавить RouterModule в корневой компонент.

БольшеВот

 Wandrille12 сент. 2017 г., 18:53
Спасибо за помощь, но, к сожалению, это не меняет результат.

Ваш ответ на вопрос