fix(angular): only routerLink works with angular router

ionic-team · Dec 5, 2018 · 63cbc92 · 63cbc92
1 parent 959ce65
commit 63cbc92
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/angular/src/directives/navigation/href-delegate.ts b/angular/src/directives/navigation/href-delegate.ts
@@ -1,42 +1,59 @@
 import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core';
-import { Router } from '@angular/router';
 import { NavController, NavDirection } from '../../providers/nav-controller';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
+import { LocationStrategy } from '@angular/common';
+import { Subscription } from 'rxjs';
 
 
 @Directive({
-  selector: '[routerLink],[routerDirection],ion-anchor,ion-button,ion-item'
+  selector: '[routerLink]'
 })
 export class HrefDelegate {
 
-  @Input() routerLink: any;
+  private subscription?: Subscription;
+
   @Input() routerDirection: NavDirection = 'forward';
 
-  @Input()
-  set href(value: string) {
-    this.elementRef.nativeElement.href = value;
+  constructor(
+    private router: Router,
+    private locationStrategy: LocationStrategy,
+    private navCtrl: NavController,
+    private elementRef: ElementRef,
+    @Optional() private routerLink?: RouterLink,
+  ) {
+    if (this.routerLink) {
+      this.subscription = router.events.subscribe(s => {
+        if (s instanceof NavigationEnd) {
+          this.updateTargetUrlAndHref();
+        }
+      });
+    }
   }
-  get href() {
-    return this.elementRef.nativeElement.href;
+
+  updateTargetUrlAndHref() {
+    if (this.routerLink) {
+      const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
+      console.log(href);
+      this.elementRef.nativeElement.href = href;
+    }
   }
 
-  constructor(
-    @Optional() private router: Router,
-    private navCtrl: NavController,
-    private elementRef: ElementRef
-  ) {}
+  ngOnChanges(): any {
+    this.updateTargetUrlAndHref();
+  }
+
+  ngOnDestroy(): any {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
 
   @HostListener('click', ['$event'])
-  onClick(ev: Event) {
-    const url = this.href;
+  onClick(ev: UIEvent) {
     if (this.routerDirection) {
       this.navCtrl.setDirection(this.routerDirection);
     }
-
-    if (!this.routerLink && this.router && url != null && url[0] !== '#' && !SCHEME.test(url)) {
-      ev.preventDefault();
-      this.router.navigateByUrl(url);
-    }
+    ev.preventDefault();
   }
 }
 
-const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
diff --git a/angular/test/test-app/e2e/src/router-link.e2e-spec.ts b/angular/test/test-app/e2e/src/router-link.e2e-spec.ts
@@ -17,10 +17,6 @@ describe('router-link', () => {
   });
 
   describe('forward', () => {
-    it('should go forward with ion-button[href]', async () => {
-      await element(by.css('#href')).click();
-      await testForward();
-    });
 
     it('should go forward with ion-button[routerLink]', async () => {
       await element(by.css('#routerLink')).click();
@@ -44,10 +40,6 @@ describe('router-link', () => {
   });
 
   describe('root', () => {
-    it('should go root with ion-button[href][routerDirection=root]', async () => {
-      await element(by.css('#href-root')).click();
-      await testRoot();
-    });
 
     it('should go root with ion-button[routerLink][routerDirection=root]', async () => {
       await element(by.css('#routerLink-root')).click();
@@ -66,10 +58,6 @@ describe('router-link', () => {
   });
 
   describe('back', () => {
-    it('should go back with ion-button[href][routerDirection=back]', async () => {
-      await element(by.css('#href-back')).click();
-      await testBack();
-    });
 
     it('should go back with ion-button[routerLink][routerDirection=back]', async () => {
       await element(by.css('#routerLink-back')).click();

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
@@ -11,11 +11,6 @@
   <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
   <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
 
-  <p>
-    <ion-button href="/router-link-page" expand="block" id="href">ion-button[href]</ion-button>
-    <ion-button href="/router-link-page" routerDirection="root" expand="block" id="href-root">ion-button[href] (direction:root)</ion-button>
-    <ion-button href="/router-link-page" routerDirection="back" expand="block" id="href-back">ion-button[href] (direction:back)</ion-button>
-  </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>