0
545
ViewsEl cuadro de diálogo de confirmación onbeforeunload no se muestra cuando se usa angular2 @HostListener
Usando el enlace @HostListener, pero el cuadro de diálogo de confirmación (que pregunta: ¿Desea abandonar esta página? ... o ¿Desea volver a cargar esta página?) no se muestra.
El código funciona, pero no se muestra el cuadro de diálogo de confirmación.
Aquí lo que tengo:
@HostListener('window:beforeunload', ['$event']) public doSomething($event) { console.log("do I see this?") // <---- this logs to the console. return "something else"; }Pero no veo esto:
3 answers
Answer question0
devolver false en lugar de la cadena "something else" soluciona el problema y se muestra el cuadro de diálogo de confirmación.
Es muy posible que los enlaces angulares modifiquen el valor de retorno.
0
Para cualquiera que todavía esté buscando otra forma de manejar esto en Angular. Puedes intentar hacer esto:
<router-outlet (window:beforeunload)="doBeforeUnload()" (window:unload)="doUnload()"></router-outlet> Aquí agregué los eventos a una salida de enrutador de eventos porque es lo único en mi app.component.html, pero puede agregarlo a un contenedor o envoltorio. También se agregaron ambos eventos porque uno antes de la beforeunload solo mostrará la alerta al usuario cuando devuelva falso y luego la unload maneja el evento de cierre real. Esto es importante porque es posible que desee saber qué hacer cuando el usuario continúa o decide cerrar o gestionar los clics no deseados. Las funciones reales se ven así:
doBeforeUnload() { // Alert the user window is closing return false; } doUnload() { // Clear session or do something this.auth.getLogout(); }PD: Probé esto en Angular 6.
0
En lugar de devolver false , debe devolver $event.returnValue = "your text"
Los navegadores modernos no muestran el texto ingresado.
@HostListener('window:beforeunload', ['$event']) yourfunction($event) { return $event.returnValue='Your changes will not be saved'; }