Angular2 - 在路由更改时停止'setInterval'http请求

Question

我正在使用Angular2编写实时更新图.我的图表正在通过httpobservable和一个setInterval命令进行更新.

我注意到的一个奇怪的事情是,当我通过角度路由到我的应用程序上的不同视图时,setInterval前一个组件上的命令不会停止,从而导致服务器不必要的负载.

setInterval在Angular2中,在路由更改上停止http请求的正确方法是什么？

任何帮助将不胜感激.

Answer 1

浏览器对事件的管理方式有很大不同,基本上它们由Event循环处理.

浏览器有内循环,称为Event Loop,它检查队列并处理事件,执行函数等.

因此,无论何时添加任何异步事件(如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)
}

额外的东西(与Angular 1比较)

您可以在任何Javascript框架中看到同样的问题.在角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
})