檢測瀏覽器或選項卡關閉 - 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 對象或偵聽器被刪除或未添加。

Answer 1

卸載事件可以在調用之前完成並關閉窗口。

請參閱本文以在 ngOnDestroy 中運行異步調用，並確保在窗口關閉事件上調用 ngOnDestroy（尤其是熱點提示 #1 和 #2 部分）。

它詳細說明了如何在窗口卸載事件上完成服務調用。 Wesley Grimes Angular ngOnDestroy 升級

這是我在 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);
 }