web-dev-qa-db-ger.com

Wie erkenne ich Benutzer, die in Angular2 zurück navigieren?

Ich habe eine Komponente und muss feststellen, ob der Benutzer in seinem Browser die Zurück-Taste gedrückt hat, um zurück zu navigieren.

Derzeit abonniere ich Router-Events.

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

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

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

        });

}

Ich weiß, dass ich window.onpopstate verwenden kann, aber es fühlt sich bei Angular2 wie ein Hack an.

35

Es ist möglich, PlatformLocation zu verwenden, das onPopState Listener hat.

import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)
30

Eine bessere IMO-Methode für das Auflisten von Popstate-Ereignissen ist das Abonnieren des Standortdienstes

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

constructor(private location: Location) { }

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

PlatformLocation wird nicht direkt verwendet (wie aus der Dokumentation hervorgeht). Sie können den Newsletter jederzeit wieder abbestellen.

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

und dann auf popstate für das window-Objekt achten:

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

Dieser Code funktioniert für mich auf dem neuesten Angular 2. 

13
VSO

Als thorin87-Antwort sollte PlatformLocation nicht verwendet werden. Wir müssen einen Newsletter abbestellen.

import {Subscription} from 'rxjs/Subscription';    

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

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