如何在 Angular 中监听浏览器的关闭事件？答案

【问题标题】：How to listening the close event of browser in Angular?如何在 Angular 中监听浏览器的关闭事件？
【发布时间】：2018-09-12 16:29:59
【问题描述】：

我正在尝试制作一个为用户提供考试的网站。每个人只有 15 分钟的时间来回答问题。当用户用完时间时，系统会将结果提交到服务器。但是如果用户关闭浏览器，什么都不会发生。那么，如何在 Angular 中监听浏览器的关闭事件。

第二部分

我想在用户关闭浏览器或刷新网页时提交结果。Ketan Akbari 的回答帮助了我。但是还有另一个问题。当我刷新网页时，我发现系统没有提交结果。然后我打开firebug 检查网络并比较刷新和手动的区别。

暗的是手动，亮的是刷新。我猜刷新事件会停止提交操作？

【问题讨论】：

标签： angular

【解决方案1】：

你可以使用onbeforeunload窗口事件。

【讨论】：

【解决方案2】：

你可以使用：

Javascript：

window.onbeforeunload = function (e) {

};

角度（打字稿）

@HostListener('window:beforeunload', ['$event'])
 beforeunloadHandler(event): void {
  // do whatever....
 }

【讨论】：

【解决方案3】：

尝试在你的主模板文件中使用它

<div (window:beforeunload)="checkSomething()"></div>

或

@Component({ 
  selector: 'xxx',
  host: {'window:beforeunload':'checkSomething'}
  ..
)}

或

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload')
  checkSomething() {
  }
}

这是侦听器的行为。

你仍然可以使用

export class AppComponent {  
  constructor() {
    window.onbeforeunload = function(e) {
      return 'You have some unsaved changes';
    };
  }
}

【讨论】：