如何使用@HostListener('window:beforeunload')来调用方法?
问题描述:
我正试图调用我自己在卸载组件之前调用的post方法,但它不起作用。如何使用@HostListener('window:beforeunload')来调用方法?
我在@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();
}
}
答
window:beforeunload
是是正确的其实之前卸载页面引发了浏览器的事件。
当您导航到另一个组件时,实际上并没有卸载该页面。
你需要做的是使用ngOnDestroy
当组件被销毁时将被调用。实现以下接口:
https://angular.io/api/core/OnDestroy
实施例:
export class NewComponent implements OnDestroy{
ngOnDestroy() {
PostCall();
}
}
答
尝试这样的:
@HostListener('window:unload', ['$event'])
unloadHandler(event) {
this.PostCall();
}
@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
return false;
}
PostCall() {
console.log('PostCall');
}