web-dev-qa-db-fra.com

la boîte de dialogue de confirmation onbeforeunload ne s'affiche pas lorsque angular2 @HostListener est utilisé

Utiliser le hook @HostListener, mais la boîte de dialogue de confirmation (qui demande: voulez-vous quitter cette page? ... ou voulez-vous recharger cette page?) N'est pas affichée.

Le code fonctionne, mais la boîte de dialogue de confirmation ne s'affiche pas.

Voici ce que j'ai: 

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

Mais je ne vois pas ça:

 enter image description here

angularangular2-hostbinding
6
raneshu

renvoyer false au lieu de la chaîne "something else" corrige le problème et la boîte de dialogue de confirmation s'affiche.

Il est tout à fait possible que les liaisons angulaires modifient la valeur de retour

7
raneshu

Pour tous ceux qui cherchent encore une autre façon de gérer cela en angulaire. Vous pouvez essayer de faire ceci:

<router-outlet (window:beforeunload)="doBeforeUnload()" (window:unload)="doUnload()"></router-outlet>

Ici, j'ai ajouté les événements à un routeur d'événement d'événement, car c'est la seule chose dans app.component.html, mais vous pouvez l'ajouter à un conteneur ou à un wrapper. Nous avons également ajouté les deux événements, car un beforeunload ne montrera l'alerte qu'à l'utilisateur lorsqu'il renvoie false, puis unload gérera l'événement de clôture réel. Cela est important car vous voudrez peut-être savoir quoi faire lorsque l'utilisateur continue ou décide réellement de fermer ou de gérer des clics indésirables. Les fonctions réelles ressemblent à ceci:

doBeforeUnload() {
    // Alert the user window is closing 
    return false;
}

doUnload() {
    // Clear session or do something
    this.auth.getLogout();
}

PD: J'ai testé cela dans Angular 6.

2
ART-Prime

Vous devez retourner ceci

return $event.returnValue = "something";

Cependant, dans les navigateurs modernes, le message que vous avez défini ne sera pas affiché. Les navigateurs montreront simplement les paramètres par défaut de leur navigateur

1
Huangism

Au lieu de renvoyer false, vous devez renvoyer $event.returnValue = "your text"

Les navigateurs modernes ne montrent pas votre texte saisi.

@HostListener('window:beforeunload', ['$event']) 
yourfunction($event) {
    return $event.returnValue='Your changes will not be saved';
}
1
nitin hawaldar