javascript - 检测浏览器或选项卡关闭 - 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属性(property)。
我是否将监听器添加到错误的组件或 DOM 对象或监听器被删除或未添加。

Answer 1

卸载事件可以在调用之前完成并关闭窗口。

请参阅本文以在 ngOnDestroy 中运行异步调用并确保在窗口关闭事件时调用 ngOnDestroy(尤其是热点提示 #1 和 #2 部分)。

它详细说明了如何完成对窗口卸载事件的服务调用。 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();
  }

我的服务.ts:

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