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

Question

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 идентичны.

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

Answer 1

Изменить HTML, как показано ниже:

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

Вы также можете проверить Why Angular2 routerLinkActive sets active class to multiple links?

Answer 2

В компоненте:

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() documentation on angular.io

Answer 3

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