javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): only routerLink works with angular router

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-12-01 15:36:41 +01:00
committed by Manu MA
parent 959ce65323
commit 63cbc92741
3 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
angular/src/directives/navigation/href-delegate.ts
View File

@ -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;
}
constructor(
@Optional() private router: Router,
private navCtrl: NavController,
private elementRef: ElementRef
) {}
updateTargetUrlAndHref() {
if (this.routerLink) {
const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
console.log(href);
this.elementRef.nativeElement.href = href;
}
}
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);
}
}
}
const SCHEME = /^[a-z][a-z0-9+\-.]*:/;

12
angular/test/test-app/e2e/src/router-link.e2e-spec.ts
View File

@ -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();

5
angular/test/test-app/src/app/router-link/router-link.component.html
View File

@ -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>