Angular 6 - RouterLinkActive не работает после обновления страницы

Question

Контекст

У меня есть меню с некоторыми пунктами.Элемент, выбранный в маршрутизаторе, имеет класс selected для изменения его цвета.

Проблема

При переключении маршрутов все работает нормально, но при обновлении страницы ничего не выбирается.

---

Код

Мой HTML-шаблон выглядит так:

<div [routerLink]="'link1'" routerLinkActive #link1="routerLinkActive">
    <div [class.selected]="link1.isActive">Link1</div>
</div>
<div [routerLink]="'link2'" routerLinkActive #link2="routerLinkActive">
    <div [class.selected]="link2.isActive">Link2</div>
</div>
...

Answer 1

Я думаю, вам нужно привязать имя выбранного класса к routerLinkActive.и ссылка отсутствует '/' что-то вроде этого должно работать:

a.selected {
  color: red;
}


/* or */

a.selected>span {
  color: red;
}

<a routerLink="link1" routerLinkActive="selected">
  <span>link 1</span>
</a>

Кроме того, вы можете играть с селекторами CSS, если вам нужно.

надеюсь, я помог:)