web-dev-qa-db-fra.com

Angular 2 - Exécute le code lors de la fermeture de la fenêtre

Je travaille sur une application de chat avec angular 2.

Comment puis-je envoyer la commande de chat final au serveur lorsque l'utilisateur ferme la fenêtre?

Mon composant a une méthode qui appelle le service principal pour mettre fin au chat de la manière suivante

 endChat() {
        this.chatService.endChat(this.chatSessionInfo).subscribe(
            result => this.OnGetMessages(result),
            error => this.OnChatEndError(error)
        );
    }

Comment puis-je exécuter ce code lors de la fermeture de la fenêtre? Comment puis-je détecter l'événement de fermeture de la fenêtre?

J'ai essayé avec ngOnDestroy mais pour une raison quelconque, le code n'est pas exécuté.

Dans mon Component.ts j'ai.

import { Component, OnInit, AfterViewChecked, ElementRef, ViewChild,OnDestroy} from '@angular/core';

export class ChatComponent implements OnInit, AfterViewChecked,OnDestroy  {

et enfin

 ngOnDestroy() { 
    this.endChat();
 }

Merci!

angulartypescript
25
federom

Merci à tous pour l'aide. J'ai pu créer une solution basée sur une proposition différente.

J'ai d'abord utilisé l'événement beforeunload dans le composant

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.endChat();
}

où

endChat() {
    this.chatService.endChatSync(this.chatSessionInfo);
}

Ensuite, l'astuce consiste à rendre la synchronisation des appels http non asynchrone.

Auparavant, la méthode de fin de conversation sur le service de discussion était

    endChat(chatSessionInfo: ChatSessionInfo)  : Observable<ChatTranscription> {
    console.log("Ending chat..");
    let body = JSON.stringify(chatSessionInfo);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.delete(this.apiUrl + "Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,options)
             .map(this.extractData)
            .catch(this.handleError);
}

J'ai pu le faire fonctionner avec

endChatSync(chatSessionInfo: ChatSessionInfo)  {
    console.log("Ending chat..");
     let xhr = new XMLHttpRequest()
     xhr.open("DELETE",this.apiUrl +"Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,false);
     xhr.send();
}

J'espère que cela t'aides!

51
federom
@HostListener('window:unload', ['$event'])
unloadHandler(event) {
  ...
}

Voir aussi javascript à vérifier quand la fenêtre du navigateur est fermée

20
Günter Zöchbauer