检测浏览器或标签页关闭 - Angular

Question

我有一个Angular 8 web应用程序，每当浏览器关闭或运行我的应用程序的浏览器选项卡关闭时，都会调用API。我尝试过以下代码：

    @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
     @HostListener('window:beforeunload', ["$event"]) unload(event) {
        //calling api
     }
    }

API的逻辑（变量和函数中的数据）在调整浏览器窗口大小（检查元素）或添加任何断点时按预期运行。我还尝试了https://v8.angular.io/api/core/Directive#host属性。
是我将监听器添加到了错误的组件或DOM对象，或者监听器被移除或未被添加。

- deep dalvi

Answer 1

在调用之前，页面的unload事件和窗口关闭事件可能已经完成。

请参阅此文章，了解如何在ngOnDestroy中运行异步调用，并确保在窗口关闭事件上调用ngOnDestroy（特别是#1和#2小节的热门提示）。

它详细介绍了如何在窗口unload事件上完成服务调用。 Wesley Grimes Angular ngOnDestroy upgrades

以下是我在app.component中的使用方式，当我关闭浏览器窗口时，它向数据库添加记录：

注意-某些导入可能与本示例不相关，只是从我的应用程序中复制代码。

app.component.ts：

import { Component, OnInit, ViewChild, ElementRef, Renderer2, Input, Output, EventEmitter, HostListener, OnDestroy  } from '@angular/core';

...

export class AppComponent implements OnInit, OnDestroy {

...

 @HostListener('window:beforeunload')
  async ngOnDestroy()
  {
    await this.myService.AddItem().subscribe();
  }

my-service.ts:

 AddItem(): Observable<any>
 {
  return this.http.get<any>(environment.apiURL + 'items/AddItem', httpOptions);
 }

- JMP

---

我尝试了使用ngOnDestroy的两种技术，但都没有奏效。 - deep dalvi

对我来说可以。我已经编辑了我的答案，展示了我使用的相关代码。 - JMP

每次在我的设备上都有效。您的类声明中是否实现了OnDestroy接口？另外，如果您将该代码添加到应用程序组件中的另一个组件中，当该组件被销毁时，ngOnDestroy中的断点是否会命中？例如通过导航离开该组件。您还检查了开发工具中的网络选项卡，以查看是否正在进行服务调用吗？ - JMP

你的 ngOnDestroy 声明中也必须加上 async，以及在其中的服务调用上加上 await 吗？ - JMP

是的。我刚刚用你的改动运行了我的应用程序，它只能在Firefox、Chrome和Edge上工作，hostlistener代码不能执行。我在其他机器上运行了同样的项目，问题一样。 - deep dalvi

@HostListener('window:beforeunload') async ngOnDestroy() {...} 这段代码部分有效。但是，即使用户离开浏览器并转到其他应用程序（如 Word 和 Excel），然后回到浏览器选项卡，此调用也会触发。我该如何仅在关闭浏览器选项卡或窗口时触发此调用？ - hemant