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

Question

我试图在卸载组件之前调用我自己创建的post方法,但它不起作用.

我在@HostListener上放了一个断点,当我打开另一个组件时它不会中断.

我正在使用Chrome进行调试,并且我打开了事件侦听器断点以进行卸载和beforeunload,这在我打开其他组件时会中断.

我在代码中遗漏了什么吗？

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

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

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

Answer 1

试试这样:

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

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

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

Answer 2

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

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

您需要做的是使用ngOnDestroy，销毁组件时将使用它。实现以下接口：

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

例：

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

Answer 3

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

返回 false 会发出警报:)

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