Angular 5 - 当用户关闭浏览器窗口时如何进行API调用？

Question

我有一个跟踪机制，通过该机制，我可以在用户停留在网页上时将JSON对象发送到API端点。所以我在一些特定事件上发送API调用。当用户离开页面时，API必须接收呼叫。

问题是我使用下面的函数来触发用户关闭broser时，但只在浏览器调试模式下触发这些函数。

    // page-wrapper.component.ts
    ...
    // triggers on DOM unload
    @HostListener('window:unload', ['$event'])
    unloadHandler(event) {
       this.service.apiCall();     // this is nevertriggered
       console.log('unloaded DOM') // triggered only in browser debug mode
    }
    // triggers just before unloadHandler()
    @HostListener('window:beforeunload', ['$event'])
    beforeUnloadHander(event) {
       this.service.apiCall();    // same as above
    }

所以我尝试了两种方法。如果我调试它们方法似乎被触发但API没有收到任何东西。

我可以确保测试与API接触的功能并且没有问题。

我认为这个问题与unloadHandler()或beforeUnloadHandler()有关。

当用户关闭浏览器窗口或浏览器选项卡时，有人知道如何调用api吗？

注意：应用程序可以位于独立的浏览器选项卡或iframe中。

Answer 1

您可以在app.component.ts中尝试使用此功能：

window.addEventListener('beforeunload', (e) => {
  yourApiCall();
});

我用它在卸载页面之前显示一条消息..

Answer 2

感谢@Francesco，我得出以下结论：

无法确保每次用户退出浏览器页面时都会触发特定功能。原因是浏览器可能出于多种原因关闭窗口。是的，它可能是用户操作，但这不是唯一的情况。例如，浏览器可能崩溃。

在我的情况下，我将不得不找到另一种策略来跟踪用户在页面上停留的时间。例如，我计划在用户退出之前发送大量API调用，并提供了解我在页面上停留所需的所有信息。当我找到一个好的解决方案时，我会更新答案。无论如何，我仍然会等待更好的答案。