Angular 8 beforeunload 事件事件在关闭选项卡上不起作用答案

【问题标题】：Angular 8 beforeunload event event not work on close tabAngular 8 beforeunload 事件事件在关闭选项卡上不起作用
【发布时间】：2019-11-25 04:03:09
【问题描述】：

嘿，我尝试在关闭选项卡上发出 http 请求，但它不起作用，但是如果我导航到其他组件它的工作。我尝试像这篇文章一样更改功能Angular 2 - Execute code when closing window

但它现在对我有用。

我的 http 服务：

  removeCurrentEditor(reportID) {
    return this.http.request('GET', this.baseUrl + this.REPORTS_API + '/' + this.REMOVE_CURRENT_EDITOR
     + '/' + reportID, {responseType: 'json'});
  }

我的组件：

 // Handle close tab
  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHander(event) {
    this.reportService.removeCurrentEditor(this.reportID);
  }

谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

我们的应用程序遇到了类似的问题，我们必须在关闭浏览器选项卡时发出 http 调用。问题是当浏览器关闭时，它会取消所有 xhr 调用。因此没有办法实现这一点，并且 Angular 不支持开箱即用的同步 http 调用。

最后，我们最终在 onBeforeUnload 事件中使用了同步 xmlhttprequest。这样，浏览器在关闭浏览器之前等待调用完成。

XMLHttpRequest.open(method, url[, async[, user[, password]]])

如果设置为 false，则 async 参数表示同步请求。

您可以探索的另一个选项是类似于心跳客户端的东西，它可以检测应用程序是否打开。如果没有，服务器可以执行逻辑。

【讨论】：