Определить браузер или закрыть вкладку - Angular - PullRequest
Новая
       23

Определить браузер или закрыть вкладку - Angular

0 голосов
/ 09 февраля 2020

У меня есть веб-приложение Angular 8, где API вызывается всякий раз, когда браузер закрыт или вкладка браузера закрыта там, где работает мое приложение. Я попробовал следующий код 

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

Лог c для API (данные в переменных и функциях) работает, как ожидалось, но только когда я изменяю размер окна браузера (проверить элемент) или добавить любую точку останова , Я также пробовал свойство https://v8.angular.io/api/core/Directive#host.
Добавляю ли я слушателя в неправильный компонент, или объект DOM или слушатель удаляется или не добавляется.

1 Ответ

0 голосов
/ 09 февраля 2020

Событие unload может завершиться и закрыть окно перед выполнением вызова.

См. Эту статью, чтобы выполнить асинхронные c вызовы в 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();
  }

my-service.ts: 

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