Angular2 - arresto delle richieste HTTP 'setInterval' sul cambio di percorso

Question

Sto scrivendo un grafico di aggiornamento in tempo reale utilizzando Angular2. Il mio grafico viene aggiornato tramite i dati provenienti da un osservabile http e un comando setInterval.

Una cosa strana che ho notato è che, quando si passa da angolare a una diversa vista sulla mia app, il comando setInterval sul componente precedente non si ferma, provocando il caricamento non necessario del server.

Quale sarebbe il metodo corretto per arrestare le richieste HTTP setInterval sulle modifiche di route in Angular2?

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Events are managed very differently by browsers, in pratica vengono elaborati dal ciclo di eventi .

Il browser ha ciclo interno, chiamato Evento Loop, che controlla la coda ed elabora gli eventi, esegue funzioni ecc

Così ogni volta che si aggiunge ogni caso asincrono come setTimeout/setInterval, hanno viene aggiunto a Event Loop con i loro gestori.

In pratica ogni volta che si desiderava stop/de-register quegli eventi asincroni, è necessario annullarli manualmente. Come qui è necessario chiamare il metodo clearInterval con il riferimento oggetto setInterval, quindi rimuoverà solo l'evento async da Event Loop.

È possibile utilizzare il gancio del ciclo di vita ngOnDestroy in cui è possibile avere le proprie cose prima di distruggere il componente.

//hook gets called before Component get destroyed or you can say disposed. 
ngOnDestroy(){ 
    clearInterval(intervalReference) 
} 

---

roba extra (Confronto con angolare 1)

Lo stesso tipo di problema si può vedere in qualsiasi framework JavaScript. In Angular 1 c'è modo di gestire questo tipo di situazione (sto aggiungendo questa roba in modo che chiunque dallo sfondo Angular 1 possa facilmente ottenere questo concetto confrontando A1 con A2). Durante la distruzione dell'istanza di angolazione dell'istanza controller emette internamente l'evento $destroy su element & $scope di tale elemento. Quindi, ascoltando l'evento $destroy, eravamo soliti fare cose per garantire che l'oggetto value/object/events non fosse disponibile.

$scope.$on('$destroy', function(event){ 
    //do stuff here 
}) 

element.bind('$destroy', function(event){ 
    //do stuff here 
})