web-dev-qa-db-fra.com

Existe-t-il un crochet de cycle de vie tel que window.onbeforeunload dans Angular2?

Existe-t-il un crochet de cycle de vie tel que window.onbeforeunload dans Angular2? J'ai déjà googlé et cherché sur stackoverflow, mais je n'ai rien trouvé

angularlifecycle
40
Dieter Köberl
<div (window:beforeunload)="doSomething()"></div>

ou

@Component({ 
  selector: 'xxx',
  Host: {'window:beforeunload':'doSomething'}
  ..
)}

ou

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload')
  doSomething() {
  }
}

Voici comment écouter les événements mondiaux. Je ne sais pas si le comportement spécial de cet événement est pris en charge lorsque la valeur de retour est utilisée comme texte pour le dialogue de conformation.

Vous pouvez toujours utiliser

export class AppComponent {  
  constructor() {
    window.onbeforeunload = function(e) {
      return 'Dialog text here.';
    };
  }
}

Comme expliqué ici https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onbeforeunload

58
Günter Zöchbauer

La réponse de Günter Zöchbauer est légèrement fausse sur deux un chef d'accusation, c'est ce qui a fonctionné pour moi:

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload', ['$event'])
  doSomething($event) {
    if(this.hasChanges) $event.returnValue='Your data will be lost!';
  }
}

La réponse de Günter présente deux différences principales:

  1. L'argument à @HostListener devrait être window:beforeunload et pas window:onbeforeunload
  2. Le gestionnaire ne devrait pas renvoyer le message, mais devrait l'affecter à $event.returnValue au lieu
52
Aviad P.

Cela a fonctionné pour moi. Défini dans le constructeur du composant de page

window.addEventListener("beforeunload", (event) => {
   event.preventDefault();
   event.returnValue = "Unsaved modifications";
   return event;
});

Définissez le returnValue uniquement si vous souhaitez demander à l'utilisateur avant le déchargement.

Ne fonctionne que si l'utilisateur interagit avec la page (par exemple, un clic).

0
Nicolas

Note importante pour iOS

L'événement beforeunload n'est pas supposé - probablement à cause du nombre élevé d'abus au fil des ans.

Au lieu de cela, vous pouvez utiliser pagehide comme recommandé par Apple .

Cela fait partie de la Page visibility API.

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Donc, je n'arrive pas à obtenir que pagehide se déclenche sur un ordinateur de bureau chromé, ni à beforeunload à se déclencher sur iOS Safari - vous avez donc besoin des deux - mais veillez à ne pas déclencher votre code deux fois.

@HostListener('window:beforeunload')
@HostListener('window:pagehide')
0
Simon_Weaver