diff --git a/packages/router/src/directives/router_link.ts b/packages/router/src/directives/router_link.ts index 2a1f09bfd4b..e9ae60ef1ba 100644 --- a/packages/router/src/directives/router_link.ts +++ b/packages/router/src/directives/router_link.ts @@ -276,7 +276,9 @@ export class RouterLink implements OnChanges, OnDestroy { ['$event.button', '$event.ctrlKey', '$event.shiftKey', '$event.altKey', '$event.metaKey']) onClick(button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean): boolean { - if (this.urlTree === null) { + const urlTree = this.urlTree; + + if (urlTree === null) { return true; } @@ -296,7 +298,7 @@ export class RouterLink implements OnChanges, OnDestroy { state: this.state, info: this.info, }; - this.router.navigateByUrl(this.urlTree, extras); + this.router.navigateByUrl(urlTree, extras); // Return `false` for `` elements to prevent default action // and cancel the native behavior, since the navigation is handled @@ -310,8 +312,9 @@ export class RouterLink implements OnChanges, OnDestroy { } private updateHref(): void { - this.href = this.urlTree !== null && this.locationStrategy ? - this.locationStrategy?.prepareExternalUrl(this.router.serializeUrl(this.urlTree)) : + const urlTree = this.urlTree; + this.href = urlTree !== null && this.locationStrategy ? + this.locationStrategy?.prepareExternalUrl(this.router.serializeUrl(urlTree)) : null; const sanitizedValue = this.href === null ? diff --git a/packages/router/src/directives/router_link_active.ts b/packages/router/src/directives/router_link_active.ts index 63b9878b651..11a6ccca4bd 100644 --- a/packages/router/src/directives/router_link_active.ts +++ b/packages/router/src/directives/router_link_active.ts @@ -220,7 +220,10 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit this.routerLinkActiveOptions : // While the types should disallow `undefined` here, it's possible without strict inputs (this.routerLinkActiveOptions.exact || false); - return (link: RouterLink) => link.urlTree ? router.isActive(link.urlTree, options) : false; + return (link: RouterLink) => { + const urlTree = link.urlTree; + return urlTree ? router.isActive(urlTree, options) : false; + }; } private hasActiveLinks(): boolean {