如何使用@HostListener('window:beforeunload') 调用方法?

How can I use @HostListener('window:beforeunload') to call a method?

我正在尝试调用我在卸载组件之前创建的 post 方法,但它不起作用。

我在@HostListener 上设置了一个断点,当我打开一个不同的组件时它不会在那里中断。

我正在使用 Chrome 进行调试,并为卸载和卸载前打开事件侦听器断点,当我打开不同的组件时它们会中断。

我的代码中是否遗漏了什么?

import { Component, OnInit, HostListener } from '@angular/core';

Component({
    templateUrl: 'new-component.html'    
})

export class NewComponent implements OnInit {
    @HostListener('window:beforeunload') onBeforeUnload() {
            PostCall();
    }
}

这样试试:

@HostListener('window:unload', ['$event'])
unloadHandler(event) {
    this.PostCall();
}

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    return false;
}

PostCall() {
    console.log('PostCall');
}

window:beforeunload 是在实际卸载页面之前触发的浏览器事件。

当您导航到另一个组件时,您实际上并没有卸载页面。

你需要做的是使用ngOnDestroy,它会在组件被销毁时被调用。实现以下接口:

https://angular.io/api/core/OnDestroy

示例:

export class NewComponent implements OnDestroy{
    ngOnDestroy() {
            PostCall();
    }
}

只需将 window:beforeunload 事件与 HostListener 一起使用,监听器将随组件一起销毁。

Return false 会发出警报:)

@HostListener('window:beforeunload')
  onBeforeUnload() {
    return false;
}