关于 Angular：如何检测用户在 Angular2 中的导航？


How do I detect user navigating back in Angular2?

我有一个组件，我需要检测用户是否按下了浏览器中的返回按钮以返回导航。

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

1
2
3
4
5
6
7
8
9
10
constructor(private router: Router, private activatedRoute: ActivatedRoute) {

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

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

        });

}

我知道我可以使用 window.onpopstate，但是在使用 Angular2 时感觉就像是 hack。

编辑
请不要这样做。

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

可以使用具有 onPopState 监听器的 PlatformLocation。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)
相关讨论

IMO 更好的监听 popstate 事件的方法是订阅位置服务

1
2
3
4
5
6
7
import {Location} from"@angular/common";

constructor(private location: Location) { }

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

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

相关讨论

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

然后在 window 对象上监听 popstate：

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

此代码适用于我在最新的 Angular 2 上。

相关讨论

作为 thorin87 的答案，不要使用 PlatformLocation。我们需要订阅一个取消订阅。

1
2
3
4
5
6
7
8
9
10
11
import {Subscription} from 'rxjs/Subscription';    

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

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

angular为 8

1
2
3
4
5
6
7
8
constructor(private readonly route: Router) {
this.route.events
  .pipe(filter((event) => event instanceof NavigationStart))
  .subscribe((event: NavigationStart) => {
    if (event.restoredState) {
      this.isBackUrl = true;
    }
  });

}

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
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.


});

相关讨论