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

Question

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

Answer 1

<div (window:beforeunload)="doSomething()"></div>

ou

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

ou

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

C'est comment écouter les événements mondiaux. Je ne sais pas si le comportement particulier de cet événement est pris en charge que si la valeur de retour est utilisé comme texte pour la conformation de la boîte de dialogue.

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

Answer 2

La réponse de Günter Zöchbauer est légèrement fausse sur deux points, 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!';
  }
}
 

Il y a deux différences principales par rapport à la réponse de Günter:

1. L'argument de @HostListener devrait être window:beforeunload et non window:onbeforeunload
2. Le gestionnaire ne doit pas renvoyer le message, mais doit plutôt l'affecter à $event.returnValue