From b010f077fe51992dd9dd8ced69769a8eb91ac055 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 31 Mar 2022 09:14:33 -0400 Subject: [PATCH] fix(angular): routerLink allows opening in a new tab for link elements (#25014) Resolves #24413 Co-authored-by: Julian Pfeil <5290648+Juarrow@users.noreply.github.com> --- .../navigation/router-link-delegate.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts index 55c9d46411..31bcf9c8e3 100644 --- a/angular/src/directives/navigation/router-link-delegate.ts +++ b/angular/src/directives/navigation/router-link-delegate.ts @@ -5,6 +5,12 @@ import { AnimationBuilder, RouterDirection } from '@ionic/core'; import { NavController } from '../../providers/nav-controller'; +/** + * Adds support for Ionic routing directions and animations to the base Angular router link directive. + * + * When the router link is clicked, the directive will assign the direction and + * animation so that the routing integration will transition correctly. + */ @Directive({ selector: '[routerLink]', }) @@ -31,19 +37,15 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges { this.updateTargetUrlAndHref(); } + @HostListener('click') + onClick(): void { + this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation); + } + private updateTargetUrlAndHref() { if (this.routerLink?.urlTree) { const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree)); this.elementRef.nativeElement.href = href; } } - - /** - * @internal - */ - @HostListener('click', ['$event']) - onClick(ev: UIEvent): void { - this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation); - ev.preventDefault(); - } }