web-dev-qa-db-fra.com

Comment détecter un utilisateur qui revient dans Angular2?

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.

angulartypescriptangular2-routing
35
Michal Pietraszko

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

import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)
30
Michal Pietraszko

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.

20
thorin87
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. 

13
VSO

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();
}
0
omi5489