时间戳

首页 > 解决方案 > Angular 捕获所有浏览器的后退按钮事件

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

问题描述

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

登录网址不同，仪表板也不同。

下面是实现

// app.component.ts

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

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

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

标签： javascriptangulargoogle-chrome

解决方案

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

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

constructor(private location: Location) { } 

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

一大优点：您可以随时取消订阅。

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

推荐阅读