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

Posted 2023-03-13

【中文标题】如何使用 @HostListener(\'window:beforeunload\') 调用方法？

【英文标题】：How can I use @HostListener('window:beforeunload') to call a method?如何使用 @HostListener('window:beforeunload') 调用方法？

【发布时间】：2018-04-01 14:20:11

【问题描述】：

我正在尝试调用我在卸载组件之前自己创建的 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();
    

【参考方案1】：

试试这样：

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


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


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

【讨论】：

工作就像一个魅力，感激！

第一个 HostListener 对我来说不再有效：从页面重新导航时，不会调用 PostCall 方法。

【参考方案2】：

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

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

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

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

例子：

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

【讨论】：

ngOnDestory 不会在页面刷新的情况下被调用。

这不是作者最初的问题。 “我正在尝试调用我在卸载组件之前自己创建的 post 方法，但它不起作用。”

是的，我只是在搜索相关内容并得到这个结果时发表评论，所以发表评论以帮助像我这样的人:)

是否有任何角度生命周期挂钩抢占页面刷新？

【参考方案3】：

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

返回 false 会发出警报 :)

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