如何在所有浏览器中捕获后退按钮事件（Angular）

Question

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

登录URL与仪表板不同。

以下是实现方式：

// app.component.ts

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

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

注意：只有在用户进行某些活动时才会触发事件，如果用户没有进行任何活动，则该事件不会触发[chrome]。

- Karan

---

请问您能否将您的脚本添加到问题中吗？您是如何实现它的？ - Davis Jahn

@DavisJahn：只需在应用程序组件中添加主机监听器。 - Karan

你的 Angular 版本是什么？ - Davis Jahn

@DavisJahn：Angular 6 - Karan

Answer 1

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

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

constructor(private location: Location) { } 

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

一个重要的优点：您可以随时取消订阅。

请注意，与window:popstate一样，它不会直接检测您是向前还是向后。仅在检测到路由参数已更改时才触发，这也会在用户按下前进按钮时发生。

- Davis Jahn

---

当用户进入页面然后点击返回按钮时仍然无法正常工作。 - Karan

它在我的设备上运行良好。你onBrowserBackBtnClose(event: Event)的实现有什么问题吗？你尝试过在订阅内部只调用console.log吗？ - Davis Jahn

不适用于Chrome浏览器，只有在用户操作后才能正常工作。 - Karan