cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(router): RouterLinkActive should run CD when setting isActive (#21411)

Browse Source 
When using the routerLinkActive directive inside a component that is using ChangeDetectionStrategy.OnPush and lazy loaded module routes the routerLinkActive directive does not update after clicking a link to a lazy loaded route that has not already been loaded.

Also the OnPush nav component does not set routerLinkActive correctly when the default route loads, the non-OnPush nav component works fine.

regression caused by #15943
closes #19934

PR Close #21411
This commit is contained in:
Manduro
2018-02-23 09:48:19 +01:00
committed by Andrew Kushnir
parent 5218916a7e
commit 80d0067048
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/router/src/directives/router_link_active.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AfterContentInit, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, Optional, QueryList, Renderer2, SimpleChanges} from '@angular/core';
import {AfterContentInit, ChangeDetectorRef, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, Optional, QueryList, Renderer2, SimpleChanges} from '@angular/core';
import {Subscription} from 'rxjs';
import {Event, NavigationEnd} from '../events';
@ -91,7 +91,7 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
constructor(
private router: Router, private element: ElementRef, private renderer: Renderer2,
@Optional() private link?: RouterLink,
private readonly cdr: ChangeDetectorRef, @Optional() private link?: RouterLink,
@Optional() private linkWithHref?: RouterLinkWithHref) {
this.subscription = router.events.subscribe((s: Event) => {
if (s instanceof NavigationEnd) {
@ -126,6 +126,7 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
const hasActiveLinks = this.hasActiveLinks();
if (this.isActive !== hasActiveLinks) {
(this as any).isActive = hasActiveLinks;
this.cdr.markForCheck();
this.classes.forEach((c) => {
if (hasActiveLinks) {
this.renderer.addClass(this.element.nativeElement, c);