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

fix(angular): button components now route correctly without reload (#25071)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-07 11:57:15 -04:00
committed by GitHub
parent 72dd51ad78
commit 1c26e9b9b0
3 changed files with 68 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
angular/src/directives/navigation/router-link-delegate.ts
View File

@ -12,7 +12,7 @@ import { NavController } from '../../providers/nav-controller';
* animation so that the routing integration will transition correctly.
*/
@Directive({
selector: '[routerLink]',
selector: ':not(a):not(area)[routerLink]',
})
export class RouterLinkDelegateDirective implements OnInit, OnChanges {
@Input()
@ -37,9 +37,56 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
this.updateTargetUrlAndHref();
}
@HostListener('click')
onClick(): void {
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);
/**
* This prevents the browser from
* performing a page reload when pressing
* an Ionic component with routerLink.
* The page reload interferes with routing
* and causes ion-back-button to disappear
* since the local history is wiped on reload.
*/
ev.preventDefault();
}
}
@Directive({
selector: 'a[routerLink],area[routerLink]',
})
export class RouterLinkWithHrefDelegateDirective implements OnInit, OnChanges {
@Input()
routerDirection: RouterDirection = 'forward';
@Input()
routerAnimation?: AnimationBuilder;
constructor(
private locationStrategy: LocationStrategy,
private navCtrl: NavController,
private elementRef: ElementRef,
private router: Router,
@Optional() private routerLink?: RouterLink
) {}
ngOnInit(): void {
this.updateTargetUrlAndHref();
}
ngOnChanges(): void {
this.updateTargetUrlAndHref();
}
private updateTargetUrlAndHref() {
@ -48,4 +95,12 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
this.elementRef.nativeElement.href = href;
}
}
/**
* @internal
*/
@HostListener('click')
onClick(): void {
this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
}
}