javascript - Angular 捕获所有浏览器的后退按钮事件

Question

我正在使用 Angular 创建项目。在我的项目中，我需要处理浏览器后退按钮。要求是当用户点击后退按钮时应该注销

Login Url 不同，dashboard 也不同。

下面是实现

//app.component.ts

@HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event: Event) {
    history.pushState('back', null, null);      
    // log out url
}

但是当用户刚登陆仪表板时，上面的代码不起作用

注意:只有当用户正在做一些事件时，如果用户没有做任何事件，事件就不会触发 [chrome]

Answer 1

我不喜欢使用 window:popstate，因为感觉它不应该在 Angular 中使用。监听 popstate 事件的更好方法是订阅位置服务:

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

constructor(private location: Location) { } 

ngOnInit() { 
    this.location.subscribe(event => {
           //do something
 });
}

一大优点:您可以随时退订。

请记住，与 window:popstate 一样，它不会直接检测您是返回还是返回。它仅在检测到路由参数已更改时触发，当用户点击第四个按钮时也会发生这种情况。