Comment détecter un utilisateur qui revient dans Angular2?

Question

J'ai un composant et je dois détecter si l'utilisateur a appuyé sur le bouton de retour dans son navigateur pour revenir en arrière.

Actuellement, je suis abonné à des événements de routeur.

 constructor(private router: Router, private activatedRoute: ActivatedRoute) {

    this.routerSubscription = router.events
        .subscribe(event => {

            // if (event.navigatesBack()) ...

        });

}
 

Je sais que je peux utiliser window.onpopstate mais cela ressemble à un bidouillage avec Angular2.

Answer 1

Il est possible d'utiliser PlatformLocation qui a onPopState auditeur.

 import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)
 

Answer 2

La meilleure méthode d’écoute de l’OMI pour les événements Popstate consiste à s’abonner au service de localisation.

 import {Location} from "@angular/common";

constructor(private location: Location) { }

ngOnInit() {
    this.location.subscribe(x => console.log(x));
}
 

Il n'utilise pas PlatformLocation directement (comme le suggère la documentation) et vous pouvez vous désabonner à tout moment.

Answer 3

 import { HostListener } from '@angular/core';
 

puis écoutez popstate sur l'objet window :

   @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
  }
 

Ce code fonctionne pour moi sur le dernier angulaire 2.

Answer 4

En tant que réponse de thorin87, n'utilisez pas PlatformLocation. Nous avons besoin de vous inscrire et de vous désabonner.

 import {Subscription} from 'rxjs/Subscription';    

ngOnInit() {
  this.subscription = <Subscription>this
    .location
    .subscribe(() => x => console.log(x));
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}