web-dev-qa-db-fra.com

Comment puis-je utiliser @HostListener ('window: onbeforeunload') pour appeler une méthode?

J'essaie d'appeler une méthode de publication que j'ai faite moi-même avant que mon composant ne soit déchargé, mais cela ne fonctionne pas.

J'ai mis un point d'arrêt sur @HostListener et il ne s'arrête pas là lorsque j'ouvre un composant différent.

J'utilise Chrome pour déboguer et j'ai activé les points d'arrêt du récepteur d'événements pour le déchargement et avant le déchargement, qui se cassent lorsque j'ouvre un autre composant.

enter image description here

Suis-je en train de manquer quelque chose dans mon code?

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

Component({
    templateUrl: 'new-component.html'    
})

export class NewComponent implements OnInit {
    @HostListener('window:beforeunload') onBeforeUnload() {
            PostCall();
    }
}
angulardebuggingonbeforeunloadangular-components
6
Friso

window:beforeunload est un événement du navigateur qui est déclenché juste avant de décharger la page.

Lorsque vous accédez à un autre composant, vous ne déchargez pas réellement la page.

Ce que vous devez faire est d'utiliser ngOnDestroy qui sera appelé lorsque le composant est détruit. Implémente l'interface suivante:

https://angular.io/api/core/OnDestroy

Exemple:

export class NewComponent implements OnDestroy{
    ngOnDestroy() {
            PostCall();
    }
}
7
Grégory Elhaimer

Essayez comme ceci:

@HostListener('window:unload', ['$event'])
unloadHandler(event) {
    this.PostCall();
}

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    return false;
}

PostCall() {
    console.log('PostCall');
}
14
Chandru

Utilisez simplement le window:beforeunload événement avec HostListener, l'écouteur sera détruit avec le composant.

Retourner faux fera une alerte :)

@HostListener('window:beforeunload')
  onBeforeUnload() {
    return false;
}
0
Patrik Kelemen