Header Ads Widget

Ticker

6/recent/ticker-posts

Evento Angular 10 Leave Browser Beforeunload: advierta a los usuarios que abandonan su aplicación

 En este artículo, aprenderemos sobre el beforeunloadevento, que es un evento del navegador que se usa para avisar o advertir a los usuarios que están a punto de abandonar una página o, en nuestro caso, la aplicación Angular.

Evento Angular 10 Leave Browser Beforeunload

Cómo usar antes de descargar en JavaScript

Puede utilizar el beforeunloadevento del navegador en JavaScript para indicar a los usuarios que van a cerrar la página de la siguiente manera:

window.addEventListener('beforeunload', (event) => {
  event.returnValue = `You have unsaved changes, leave anyway?`;
});

Cómo usar beforeunloaden Angular

En Angular, puede usar la CanDeactivateprotección de ruta para advertir a los usuarios cuando están a punto de dejar la ruta / página actual a otra página en la aplicación, pero debe usar el beforeunloadevento si necesita ver el cierre de la pestaña o toda la aplicación refrescante

Al igual que JavaScript simple, deberá agregar un oyente al beforeunloadevento de la ventana utilizando el addEventListenermétodo de JavaScript (no muy recomendado) o las API de Angular como HostListenerPor ejemplo, puede agregar el siguiente código en un componente:

@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
    // Your logic on beforeunload
}

También puede vincular un método al window:beforeunloadevento de un elemento DOM dentro de su página de la siguiente manera:

<div (window:beforeunload)="onBeforeUnload()"></div>

Publicar un comentario

0 Comentarios