时间戳

首页 > 解决方案 > 如何在关闭选项卡上实现 Angular 10 中的注销并防止刷新或通过鼠标或键重新加载

javascript - 如何在关闭选项卡上实现 Angular 10 中的注销并防止刷新或通过鼠标或键重新加载

问题描述

import { Component, HostListener, Inject } from '@angular/core';
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls:['./home.component.scss']
})
export class HomeComponent {
    User: any;
    isRefreshed = false;
    @HostListener('window:beforeunload', ['$event'])
    onBeforeUnload(event: Event) {
        console.log('isrefreshed', this.isRefreshed);
        if (!this.isRefreshed) {
            this.User.logout();
        }
    }
    constructor(@Inject('User') userProvider) {
        this.User = userProvider;
        window.addEventListener('keydown', event => {
            console.log('Key Pressed ==>', event, this.isRefreshed);
            if (event.key == 'r' || event.key == 'F5') this.isRefreshed = true;
        });
    }

}
  1. 我可以logout在关闭选项卡上。但是当重新加载或用鼠标刷新时它也会被注销。如何处理这些？
  2. 我怎样才能让这些事件在整个应用程序中触发，而不仅仅是Home组件？

标签： javascriptangular

解决方案

  1. 不幸的是，关闭浏览器选项卡（窗口）或重新加载/刷新窗口之间没有区别——它们都注册为一个事件，即卸载该 DOM 窗口元素的内容。

  2. 有几种处理方法。这样做的一种方法是在根组件（通常命名为AppComponent）中绑定“beforeunload”事件，然后在那里响应该事件......由于它是根组件，因此它将是应用程序范围的。

推荐阅读