如何在 Angular 2+ 中使用 HostListener 防止窗口关闭事件答案

【问题标题】：How To Prevent Window Close Event Using HostListener In Angular 2+如何在 Angular 2+ 中使用 HostListener 防止窗口关闭事件
【发布时间】：2018-11-28 07:00:59
【问题描述】：

我正在使用 HostListener 获取窗口关闭事件并尝试阻止该事件。

我首先导入了 HostListener 并使用了这段代码。但是，我无法阻止窗口关闭事件。

  import { HostListener } from '@angular/core';

  @HostListener('window:beforeunload', ['$event'])
   onWindowClose(event: any): void {

       this.doSomething();

   }

【问题讨论】：

标签： events angular5 onbeforeunload

【解决方案1】：

您可以使用 HostListener 阻止单独组件的窗口关闭事件。

首先导入您的组件中的 HostListener

import { HostListener } from '@angular/core';

并且，使用此代码来防止窗口关闭。

  @HostListener('window:beforeunload', ['$event'])
   onWindowClose(event: any): void {
    // Do something

     event.preventDefault();
     event.returnValue = false;

  }

现在，您的活动被阻止了。

【讨论】：

我用过同样的，但它对我不起作用，也没有显示错误
@pal :: 在哪个组件中包含了 beforeunload 事件？ .在浏览器中打开该特定组件。然后关闭浏览器选项卡。它将向您显示警报弹出窗口。！再试一次。如果您有任何疑问，请告诉我。或者您可以在电子邮件中显示您的代码吗？
这里说的是两个组件？
@pal :: 是的。在我的项目中，我使用这个事件来提交表单。如果用户进入表单组件，然后用户填写详细信息，然后用户尝试关闭该选项卡，我将首先检查表单。如果他/她输入任何值。然后我阻止标签关闭。否则选项卡将关闭。我只将它用于一个组件。如果您想防止整个应用程序的选项卡关闭，您可以在 index.html 文件上编写一些脚本（没有主机侦听器），或者您也可以通过每个组件添加主机侦听器来实现。