Javascript 检测浏览器或选项卡关闭-角度

我有一个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（变量和函数中的数据）的逻辑按预期运行，但仅当我调整浏览器窗口（inspect元素）的大小或添加任何断点时才运行。 我也试过财产。

---

是否将侦听器添加到错误的组件，或者DOM对象或侦听器正在被删除或未被添加。

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

请参阅本文以在Ngondestory中运行异步调用，并确保在窗口关闭事件（特别是热提示1和2部分）中调用Ngondestory

它详细说明了如何在窗口卸载事件上完成服务调用。

以下是我如何在app.component中使用它，该组件在我关闭浏览器窗口时将记录添加到数据库中：

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

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

注意-有些导入可能不相关，只是从我的应用程序中复制代码

app.component.ts:

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

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

我的服务。ts:

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

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

AddItem（）：可观察
{
返回此.http.get（environment.apirl+'items/AddItem'，httpOptions）；
}

我尝试了使用Ngondestry的两种技术，但都没有奏效。对我来说很有效。我编辑了我的答案，以显示我使用的相关代码，每次都适用于我的答案。您的类声明中有实现OnDestroy吗？此外，如果将代码添加到app component中的另一个组件中，当该组件被销毁时，Ngondestory中的断点是否会被命中？例如，通过导航离开组件？您是否还检查了开发工具中的“网络”选项卡以查看是否正在进行服务调用？您还必须在Ngondestory声明上异步并等待其中的服务调用？是的。我刚刚用你的更改运行了我的应用程序，它只在Firefox、Chrome和Edge上运行，hostlistener代码无法执行。我在其他机器上运行了相同的项目，但遇到了相同的问题。