0

Estoy desarrollando una aplicación con angular y necesito hacer una llamada al api exactamente cuando el usuario cierre la ventana para hacer un cambio en la base de datos. He intentado de todo pero en la mayoría de los casos veo que solo es posible con JavaScript puro. Alguien podría ayudarme o tiene alguna idea de como hacerlo con Angular.

Como pueden ver en el código trato de ejecutar el método con el beforeunload, pero lamentablemente esto no me funciona.

import { Component, HostListener, OnInit, OnDestroy } from '@angular/core';
import { UserService } from "../../Services/user.service";

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [UserService]
})
export class HomeComponent implements OnInit {

public objeto:any = JSON.parse(localStorage.getItem('user'));

constructor( private peticion:UserService ) {
}

@HostListener('window:beforeunload', ["$event"]) 
DoSometing() {
    const confirmar = confirm("Desea salir de la aplicacion?");
    if (confirmar) {
        this.change_state();
    }
}

ngOnInit(): void {
    
}


//Metodo para cambiar el estado del usuario 
change_state() {
    const user_send = {
        "id": this.objeto.id,
        "nombre": this.objeto.nombre,
        "apellido": this.objeto.apellido,
        "correo": this.objeto.correo,
        "password": this.objeto.password,
        "estado": 0
    }

    this.peticion.update_user_service(user_send, this.objeto.id).subscribe(
        result => {
            console.log("Did it");
        },
        error => {

        }
    );
}

}
6
  • me parece que angular tiene un evento para manejarlo mira este post:
    – user46896
    el 2 may. 2021 a las 17:13
  • stackoverflow.com/a/30345961/4717133
    – user46896
    el 2 may. 2021 a las 17:13
  • Muchas gracias por el aporte amigo, pero creo que no funcionaria porque el post es para AngularJS y estoy usando angular 11. No me serviría. el 2 may. 2021 a las 21:52
  • no te sirve lo programado pero es el concepto lo que te debe servir
    – user46896
    el 2 may. 2021 a las 22:00
  • Entiendo a la perfección, pero hay métodos que ya son obsoletos y he investigado y ninguno de ellos existe en el angular de hoy en día. el 2 may. 2021 a las 23:44

1 respuesta 1

0

Estás bastante cerca, lo único que tienes que hacer es retornar false lo cual muestra un diálogo de ayuda evitando que se cierre de inmediato la página, es en este punto donde puedes enviar datos a alguna API, como esto debe ser un proceso rápido te recomiendo usar navigator.sendBeacon en vez de lo que te provee Angular para enviar data, esto porque la ventaja que tiene sendBeacon es que envía una cantidad pequeña de información mucho más ligera que un llamado HTTP normal, teniendo en cuenta que el Body de lo que se puede enviar en sendBeacon es de tipo FormData, así el código sería el siguiente:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @HostListener('window:beforeunload')
  onUnload() {
    const data = new FormData();

    data.append('name', 'abc');
    data.append('location', 'world');
    navigator.sendBeacon('http://www.mysitioweb.com/api/v1/endpoint', data);

    return false;
  }
}

Lastimosamente no puedes personalizar el mensaje que sale en el diálogo de confirmación, esto ha sido adopatado por la mayoría de navegadores para mantener un comportamiento consistente y seguro

2
  • Muchas gracias! Me servicio a la perfección!!!! el 5 may. 2021 a las 15:00
  • Genial, si fue así considera poner mi respuesta como la respuesta acepta :) el 5 may. 2021 a las 15:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.