Angular2 - остановка «setInterval» http-запросов при изменении маршрута

Question

Я пишу график реального времени, используя Angular2. Мой график обновляется через данные, поступающие через наблюдаемый http, и команду setInterval.

Странная вещь, которую я заметил, заключается в том, что когда я перехожу через угловое изображение к другому виду приложения, команда setInterval на предыдущем компоненте не останавливается, в результате чего сервер получает ненужную нагрузку.

Что было бы правильным способом остановить setInterval http-запросы на изменение маршрута в Angular2?

Любая помощь была бы оценена.

Answer 1

Events are managed very differently by browsers, в основном они обрабатываются Контур события.

Браузер имеет внутренний контур, называемый Loop Event, который проверяет очередь и обрабатывает события, выполняет функции и т.д.

Поэтому, когда вы добавляете любое асинхронное событие, как setTimeout/setInterval, они добавляется к Event Loop с их обработчиками.

В основном, когда вы хотели получить stop/de-register эти асинхронные события, вам необходимо удалить их вручную. Как здесь, вы должны вызвать метод clearInterval с ссылкой на объект setInterval, тогда только он удалит это событие async от Event Loop.

Вы можете использовать крюк жизненного цикла ngOnDestroy, где у вас есть свои вещи, прежде чем уничтожить ваш компонент.

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

---

Дополнительное вещество (По сравнению с угловыми 1)

Такого же рода проблемы, которую вы можете увидеть в любой Javascript Framework. В Angular 1 есть способ справиться с такой ситуацией (я добавляю этот материал, чтобы кто-нибудь из фона Angular 1 мог легко получить эту концепцию, сравнив A1 с A2). При уничтожении controller экземпляр углового внутреннего излучателя $destroy событие за element & $scope этого элемента. Таким образом, имея слушателя над событием $destroy, мы использовали материал, чтобы гарантировать, что объект value/object/events не должен быть доступен.

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

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