如何检测用户在Angular2中导航回来？

Question

我有一个组件,我需要检测用户是否在他的浏览器中按下了按钮以导航回来.

目前我正在订阅路由器事件.

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

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

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

        });

}

我知道我可以使用,window.onpopstate但在使用Angular2时感觉就像是黑客.

Answer 1

有可能使用PlatformLocation哪个有onPopState听众.

import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)

Answer 2

IMO更好的持久化popstate事件的方法是订阅位置服务

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

constructor(private location: Location) { }

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

它不直接使用PlatformLocation(如文档所示),您可以随时取消订阅.

Answer 3

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

然后听popstate上window对象:

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

此代码适用于最新的Angular 2.