Angular2 - stoppe 'setInterval' http Anfragen auf Route ändern

Question

Ich schreibe ein Echtzeit-Update Graph mit Angular2. Mein Diagramm wird durch Daten aktualisiert, die über einen http Observable und einen setInterval Befehl kommen.

Eine komische Sache, die ich bemerkt habe, ist, dass, wenn ich eckig zu einer anderen Ansicht auf meiner App route, der setInterval Befehl auf der vorherigen Komponente nicht stoppt, was den Server für unnötige Belastung verursacht.

Was wäre die korrekte Methode zum Stoppen setInterval http Anfragen auf Route Änderungen in Angular2?

Jede Hilfe wäre willkommen.

Answer 1

Events are managed very differently by browsers, im Grunde werden sie von Ereignisschleife verarbeitet.

Der Browser innere Schleife, die so genannte Ereignisschleife, die die Warteschlange überprüft und verarbeitet Ereignisse, führt Funktionen usw.

Also, wenn Sie ein asynchrones Ereignis hinzufügen, wie setTimeout/setInterval, sie wird zu Event Loop mit ihren Handlern hinzugefügt.

Grundsätzlich, wann immer Sie diese asynchronen Ereignisse stop/de-register wollten, müssen Sie sie manuell abmelden. Wie hier müssen Sie clearInterval Methode mit dieser setInterval Objektreferenz aufrufen, dann wird nur das async Ereignis von Event Loop entfernt.

Sie könnten ngOnDestroy Life-Cycle-Haken verwenden, wo Sie Ihre Sachen haben können, bevor Sie Ihre Komponente zerstören.

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

---

Extramaterial

Die gleiche Art von Problem (mit kantigen 1 Vergleich) Sie in jeder Javascript-Framework sehen. In Angular 1 gibt es einen Weg, mit einer solchen Situation umzugehen (ich füge dieses Zeug hinzu, so dass jeder von Angular 1 Hintergrund dieses Konzept leicht bekommen kann, indem man A1 mit A2 vergleicht). Während der Zerstörung controller Instanz Winkel intern emittiert $destroy Ereignis über element & $scope dieses Elements. Also, indem wir Listener über $destroy Ereignis haben, haben wir Sachen gemacht, um sicherzustellen, dass das Objekt value/object/events nicht verfügbar sein sollte.

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

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