如何使用@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

window:beforeunload是是正确的其实之前卸载页面引发了浏览器的事件。

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

你需要做的是使用ngOnDestroy当组件被销毁时将被调用。实现以下接口：

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

实施例：

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

Answer 2

尝试这样的：

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

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

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