routerLinkActive not updating when routerLink changed

[Simon-Briggs]

I have a routerLink URL that can change over time, but when the URL changes, routerLinkActive is not re-evaluated.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Change a routerLink URL to match/not match the current URL. routerLinkActive class is not applied/removed.

Expected behavior

routerLinkActive is re-evaluated when its corresponding routerLink is updated.

Minimal reproduction of the problem with instructions

Click "link a" or "link b" to make them active, then click the switchLinks button to change the URLs. Nothing changes.
http://plnkr.co/edit/DHn4my9uAKJSIQSTIm1g?p=preview

What is the motivation / use case for changing the behavior?

I have multiple departments managed by the same UI, with department name as a variable in the URL. When the user switches departments, and the on screen links or URL is changed, the UI doesn't update the routerLinkActive.

I think it's because ContentChildren.changes doesn't fire if the contents of a directive is changed, only when directives are added or removed.:
https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link_active.ts#L106

Maybe it's too bad for performance to fix this?

Environment

Angular version: 4.3
Mac

Browser:

• [x ] Chrome (desktop) version 59
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

[bennadel]

I just ran into this as well. I have a tab setup where the tab links to a child like:

<a routerLink="/tabs/{{ id }}/build" routerLinkActive="on">build</a>

... and if I navigate from /tabs/1/build to /tabs/2/build, the "build" tab active-class turns off, despite the fact that the URL changes to reflect the new id. Note that it doesn't matter how the navigation takes place: performing it programmatically or just manually editing the URL -- the effect is the same.

[bennadel]

I think I see what is happening. I added a break-point in the algorithm that determines if the routerLink should be active; and, it looks like the local urlTree isn't actually updated at the point that the NavigationEnd event is evaluated. In the following screenshot, I've navigated to ..../1/screens/1/....; but, the routerLink urlTree is still checking against the previous url, ..../1/screens/2/....:

Perhaps there is a race condition with the QueryList<RouterLink> in the RouterLinkActive directive - in which the DOM isn't updated yet, at the time the NavigationEnd event has fired.

[bennadel]

I have a hack that seems to work. After looking at the source code, it looks like this.update() is also called any time the inputs are changed. So, if you add an routerLinkActiveOptions property and give it a throw-away value that is changed based on the URL, then the inputs will technically change. Example:

<a
routerLink="/foo/:id/bar"
routerLinkActive="on"
[routerLinkActiveOptions]="{ exact: false, __change_detection_hack__: id }"> Link </a>

Here, the __change_detection_hack__ key will change when the id changes (ie, after navigation has completed and the template is reconciled), which will cause the inputs to change, which will cause the this.update() method to run. And, at that point, the QueryList<RouterLink> should be in the proper state.

It's janky, but it works as a stop-gap.

[bennadel]

I wrote my example up, in case it helps anyone else - https://www.bennadel.com/blog/3375-forcing-routerlinkactive-to-update-using-an-inputs-hack-in-angular-5-0-2.htm

[jorroll]

Thanks for sharing your temporary fix!

[simeyla]

Great fix @bennadel . Is this the only way anybody has found? Is there nothing like router.refresh() or router.updateChangeDetection() that would have the same effect? And do you know anything about when this is going to be 'fixed' for real.

Also wanted to make sure the following similar scenario will be handled - and can confirm that your fix works works even if you have a dynamic routerLink from an observable.

I have several tabs with a shared router outlet for the 'current customer' - eg. 'Order / History / Notes'.
The order tab shows a single order chosen from a list so I have an orderRouteLink$ observable which emits something like [order, '50001'] when the current order changes. Of course the same thing happens here and the link isn't made active when switching the [routerLink] to the already-active current route.

Fortunately I was able to push (orderRouteLink$ | async) into your hack and it correctly triggers an update every time orderRouteLink$ emits a new route.

        <a mat-tab-link
           [routerLink]="orderRouteLink$ | async"
           [routerLinkActiveOptions]="{ exact: false, __change_detection_hack__: (orderRouteLink$ | async) }"

           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
            Order #{{ dataService.orderId.value}}
        </a>

orderRouteLink$ is just a BehaviorSubject:

   orderRouteLink$ = new BehaviorSubject<any[] | string>([]);

[scott-ho]

any progress?

[scott-ho]

I have to write a dirty directive as a work around to force the update

import {
  AfterContentInit,
  ContentChildren,
  Directive,
  Input,
  OnChanges,
  QueryList,
  SimpleChanges,
} from '@angular/core';
import { RouterLinkActive } from '@angular/router';

@Directive({
  selector: '[routerLink]',
})
export class RouterLinkDirective implements OnChanges, AfterContentInit {
  @Input() routerLink: any[] | string;

  @ContentChildren(RouterLinkActive, { descendants: true })
  linkActives !: QueryList<RouterLinkActive>;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.routerLink && this.linkActives && this.linkActives.first) {
      this.linkActives.first.ngOnChanges(null);
    }
  }

  ngAfterContentInit() {
    this.linkActives.changes.subscribe(_ => this.linkActives.first.ngOnChanges(null));
  }
}

[vvolodin]

Can't believe that this issue is more than a year old. Such basic functionality and it's broken.
Thanks a lot @bennadel for the workaround, it works great!