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

Je suis en train d'appeler une méthode post j'ai fait moi-même avant mon composant est déchargé, mais il ne fonctionne pas.

J'ai mis un point d'arrêt sur @HostListener et il ne rompt pas là quand j'ai ouvert un autre composant.

Je suis en utilisant google Chrome pour debug et j'ai allumé Écouteur d'Événement de points d'arrêt pour les décharger et les beforeunload, qui ne pause quand j'ouvre un autre composant.

Comment puis-je utiliser @HostListener (

Suis-je raté 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();
    }
}
InformationsquelleAutor Friso | 2017-10-20
  1. 6

    window:beforeunload est un navigateur événement qui est déclenché à droite avant le déchargement de la page.

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

    Ce que vous devez faire est d'utiliser ngOnDestroy qui sera appelée 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();
    }
}
    • ngOnDestory n'est pas appelée sur la page d'actualisation des cas.
    • Ce qui n'est pas le problème initial de l'auteur. "Je suis en train d'appeler une méthode post j'ai fait moi-même avant mon composant est déchargé, mais il ne fonctionne pas."
    • oui, je viens de mettre un commentaire comme j'étais à la recherche de quelque chose de lié et a obtenu ce résultat, il suffit de mettre un commentaire afin d'aider les autres comme moi: -)
    • Faire tout angulaire du cycle de vie des crochets de préempter actualisation de la page?
    InformationsquelleAutor Grégory Elhaimer
  2. 13

    Essayer comme ceci :

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

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

PostCall() {
    console.log('PostCall');
}
    InformationsquelleAutor Chandru
  3. 0

    Simplement utiliser le window:beforeunload événement avec HostListener, l'auditeur sera détruite avec le composant.

    Return false fera une alerte 🙂

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