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

Question

我有一个组件，我需要检测用户是否在浏览器中按下后退按钮以导航回来。

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

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

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

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

        });

}

我知道我可以使用

window.onpopstate

，但使用 Angular2 时感觉就像是黑客攻击。

Answer 1

---

编辑 请不要这样做。

官方文档说“应用程序开发人员不应该直接使用此类。相反，请使用Location。”参考：https://angular.io/api/common/PlatformLocation

---

可以使用具有

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。

Answer 4

正如 thorin87 的回答，不要使用 PlatformLocation。我们需要订阅和取消订阅。

import {Subscription} from 'rxjs/Subscription';    

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

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

Answer 5

角度8+

constructor(private readonly route: Router) {
this.route.events
  .pipe(filter((event) => event instanceof NavigationStart))
  .subscribe((event: NavigationStart) => {
    if (event.restoredState) {
      this.isBackUrl = true;
    }
  });

}

Answer 6

现在推荐的方法是使用宿主元素绑定，因为

@HostBinding

和

@HostListener

专门用于 向后兼容性。

https://angular.dev/guide/components/host-elements#binding-to-the-host-element

@Component({
  host: {
    '(window:popstate)': 'onPopState($event)'
  }
})

public onPopState(event: PopStateEvent) {
  console.log(event);
}

Answer 7

此解决方案适用于所有版本的 Angular。

import { PlatformLocation } from'@angular/common';

constructor( private _location: PlatformLocation ) {

this._location.onPopState (() => {
 `enter code here` // You could write code to display a custom pop-up here.

 // window.location.href = 'https://www.google.com'; //Navigate to another location when the browser back is clicked.


});