Come posso rilevare l’utente che torna indietro in Angular2?

Ho un componente e ho bisogno di rilevare se l’utente ha premuto il pulsante Indietro nel suo browser per tornare indietro.

Attualmente sto iscrivendo eventi del router.

constructor(private router: Router, private activatedRoute: ActivatedRoute) { this.routerSubscription = router.events .subscribe(event => { // if (event.navigatesBack()) ... }); } 

So che posso usare window.onpopstate ma si sente come un hack quando si utilizza Angular2.

È ansible utilizzare PlatformLocation con listener onPopState .

 import { PlatformLocation } from '@angular/common' (...) constructor(location: PlatformLocation) { location.onPopState(() => { console.log('pressed back!'); }); } (...) 

Il metodo IMO migliore di listenting per gli eventi popstate è quello di iscriversi al servizio di localizzazione

 import {Location} from "@angular/common"; constructor(private location: Location) { } ngOnInit() { this.location.subscribe(x => console.log(x)); } 

Non utilizza direttamente PlatformLocation (come suggerisce la documentazione) e puoi annullare l’iscrizione ogni volta che vuoi.

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

e quindi ascolta popstate della window :

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

Questo codice funziona per me sull’ultima versione di Angular 2.

Come risposta thorin87 non utilizzare PlatformLocation. Abbiamo bisogno di iscriversi per annullare l’iscrizione.

 import {Subscription} from 'rxjs/Subscription'; ngOnInit() { this.subscription = this .location .subscribe(() => x => console.log(x)); } ngOnDestroy() { this.subscription.unsubscribe(); }