En mi aplicación, quiero una función que brinde un mensaje de advertencia cuando lo intente; cerrar la pestaña, salir de la página o recargar la página. El código que escribí para él está a continuación. En este momento, da una advertencia. Sin embargo, todavía sale de la página antes de que pueda hacer clic en "sí" o "no". ¿Cómo puedo arreglar esto?
HTML:
<div (window:beforeunload)="onWindowClose($event)"></div>TS:
@HostListener('window:beforeunload', ['$event']) onWindowClose(event: any): void { this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, { disableClose: false, }); this.confirmDialogRef.componentInstance.confirmMessage = "You will be exiting the page, are you sure?"; this.confirmDialogRef.afterClosed().subscribe((result) => {}); event.preventDefault(); event.returnValue = false; }¿Por qué no utilizar una directiva para lograrlo?
@Directive({selector: 'button[counting]'}) class CountClicks { numberOfClicks = 0; @HostListener('click', ['$event.target']) onClick(btn) { console.log('button', btn, 'number of clicks:', this.numberOfClicks++); } } @Component({ selector: 'app', template: '<button counting>Increment</button>', }) class App {}