Угловой 2 routerLinkActive всегда активен для базового пути

У меня есть этот код для моего навигатора:

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

Проблема заключается в том, что главная точка навигации всегда получает класс, потому что/кажется, всегда активна. Можно ли это избежать с помощью небольшого и простого решения?

Спасибо за помощь

Редактировать:

это решение на данный момент:

[routerLinkActiveOptions] = "{exact: true}"

Ответ 1

Это, похоже, известная проблема. Несколько обходных путей подробно описаны в этой теме: https://github.com/angular/angular/issues/8397

Ответ 2

Как было предложено @TomRaine в этом ответе, вы можете добавить к свойству свойство [routerLinkActiveOptions]="{ exact: true }":

<nav>
  <a [routerLink]="['/']" 
      [routerLinkActive]="['nav-active']"
      [routerLinkActiveOptions]="{ exact: true }">
    HOME
  </a>
  ...
</nav>