RouterLinkActive для RouterLink с параметрами (/dynamic)

RouterLinkActive не работает при использовании динамически сгенерированной ссылки при навигации по самому приложению.

например. в моей верхней навигации у меня это;

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a>

В то время как версия с жесткой кодировкой будет работать.

<a [routerLink]=['user','bob']>View Bobs Account</a>

Плунж для этого здесь; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

Нажмите "John" и "Dynamic Router Link Name =" и "John" оба должны быть активными. Это иногда срабатывает при первом щелчке, если это так, затем нажмите "Домой", затем нажмите "Джон", вы увидите, что только жесткосвязанная ссылка зарегистрирована как активная, хотя hrefs идентичны.

Является ли это конструированным/невозможным? или я устанавливаю что-то неправильно?

Ответ 1

В вашем компоненте:

import {Router} from '@angular/router';

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
}

В вашем HTML:

<a [class.active]="isActive(['user', currentUser.name])">

Router.isActive() документация на angular.io

Ответ 2

Принятый ответ не работал для меня, и я просто хотел выделить совпадения маршрутов верхнего уровня, поэтому я использовал:

isActive(url): boolean {
    return this.router.url.includes(url);
}

а также:

[class.active]="isActive('url')"

Ответ 3

Измените свой HTML, как показано ниже:

<a [routerLink]=['user', currentUser.name] 
  routerLinkActive='active'>
    {{currentUser.name}}
</a>

Вы также можете проверить, почему Angular2 routerLinkActive устанавливает активный класс для нескольких ссылок?

Ответ 4

routerLinkActive оценивается при начальной загрузке и только при изменении маршрута. Он не переоценивается при изменении ссылки. Следовательно, динамически сгенерированная ссылка не работает с routerLinkActive. Решение Виктора Бредихина выше работает как функция компонента оценивается во время рендеринга.