Почему Angular2 routerLinkActive устанавливает активный класс для нескольких ссылок?

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

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

Вот он, как выглядит

введите описание изображения здесь Вот как это выглядит в dev-tools введите описание изображения здесь И моя адресная строка

введите описание изображения здесь

Мне что-то не хватает, потому что я делаю это как описано в angular docs.

Ответы

Ответ 1

Попробуйте установить [routerLinkActiveOptions]="{exact: true}" в HTML, как показано ниже:

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

Как это работает?

он работает, потому что для 1-го URL-адреса url будет "localhost: 8080/", а для URL-адреса второй ссылки "localhost: 8080/about", и если для 1-й ссылки, если вы не добавляете routerLinkActiveOptions, то при посещении localhost: 8080/о странице, то он также будет соответствовать начальному URL-адресу "localhost: 8080/", и из-за этого он устанавливает активный класс по первой ссылке. вам нужно установить routerLinkActiveOptions только для тех URL, для которых вы хотите, чтобы URL-адрес соответствовал ссылке точно