Tengo un componente y necesito detectar si el usuario presionó el botón Atrás en su navegador para navegar de nuevo.
Actualmente estoy suscribiendo eventos de enrutador.
constructor(private router: Router, private activatedRoute: ActivatedRoute) { this.routerSubscription = router.events .subscribe(event => { // if (event.navigatesBack()) ... }); } Sé que puedo usar window.onpopstate pero se siente como un truco cuando uso Angular2.
Es posible usar PlatformLocation que tiene onPopState escucha onPopState .
import { PlatformLocation } from '@angular/common' (...) constructor(location: PlatformLocation) { location.onPopState(() => { console.log('pressed back!'); }); } (...)
El mejor método de IMO para resistir eventos de estado emergente es suscribirse al servicio de ubicación
import {Location} from "@angular/common"; constructor(private location: Location) { } ngOnInit() { this.location.subscribe(x => console.log(x)); }
No utiliza PlatformLocation directamente (como lo sugiere la documentación) y puede darse de baja en cualquier momento que desee.
import { HostListener } from '@angular/core';
y luego escucha popstate en el objeto window :
@HostListener('window:popstate', ['$event']) onPopState(event) { console.log('Back button pressed'); }
Este código funciona para mí en el último Angular 2.
Como respuesta thorin87 no use PlatformLocation. Necesitamos suscribir una cancelación de suscripción.
import {Subscription} from 'rxjs/Subscription'; ngOnInit() { this.subscription = this .location .subscribe(() => x => console.log(x)); } ngOnDestroy() { this.subscription.unsubscribe(); }