fix(angular): routerLink with null value works with Angular 13 (#24622)

Resolves #24586
ionic-team · Jan 24, 2022 · 90a9a9c · 90a9a9c
1 parent fde35a3
commit 90a9a9c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts
@@ -41,7 +41,7 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges, OnDestroy
   }
 
   private updateTargetUrlAndHref() {
-    if (this.routerLink) {
+    if (this.routerLink?.urlTree) {
       const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
       this.elementRef.nativeElement.href = href;
     }

diff --git a/angular/test/test-app/src/app/router-link/router-link.component.html b/angular/test/test-app/src/app/router-link/router-link.component.html
@@ -6,6 +6,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
+
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
@@ -14,11 +15,15 @@
   <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 
   <p>
-    <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]</ion-button>
-    <ion-button routerLink="/router-link-page" routerDirection="root" expand="block" color="dark" id="routerLink-root">ion-button[routerLink] (direction:root)</ion-button>
-    <ion-button routerLink="/router-link-page" routerDirection="back" expand="block" color="dark" id="routerLink-back">ion-button[routerLink] (direction:back)</ion-button>
+    <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]
+    </ion-button>
+    <ion-button routerLink="/router-link-page" routerDirection="root" expand="block" color="dark" id="routerLink-root">
+      ion-button[routerLink] (direction:root)</ion-button>
+    <ion-button routerLink="/router-link-page" routerDirection="back" expand="block" color="dark" id="routerLink-back">
+      ion-button[routerLink] (direction:back)</ion-button>
   </p>
 
+  <p><a [routerLink]="null">null router link</a></p>
   <p><a routerLink="/router-link-page" id="a">a[routerLink]</a></p>
   <p><a routerLink="/router-link-page" routerDirection="root" id="a-root">a[routerLink] (direction:root)</a></p>
   <p><a routerLink="/router-link-page" routerDirection="back" id="a-back">a[routerLink] (direction:back)</a></p>
@@ -28,6 +33,7 @@
   <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
   <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
 
-  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
+  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }"
+      fragment="myDiv1">Query Params and Fragment</button></p>
 
 </ion-content>