异步 – Angular2 – 在路由更改时停止’setInterval’http请求

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

我注意到的一个奇怪的事情是,当我通过angular路由到我的app上的不同视图时,前一个组件上的setInterval命令不会停止,从而导致服务器进行不必要的加载.

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

任何帮助将不胜感激.

解决方法

Events are managed very differently by browsers,基本上它们是由Event循环处理的.

The browser has inner loop,called Event Loop,which checks the queue
and processes events,executes functions etc.

因此,每当您添加任何异步事件(如setTimeout / setInterval)时,它们都会使用其处理程序添加到Event Loop.

基本上每当您想要停止/取消注册这些异步事件时,您需要手动取消注册它们.就像在这里你需要使用setInterval对象引用调用clearInterval方法,然后它只会从Event Loop中删除该异步事件.

您可以使用ngOnDestroy生命周期钩子,在破坏组件之前可以使用你的东西.

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

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

您可以在任何Javascript框架中看到同样的问题.在Angular 1中,有办法处理这种情况(我正在添加这些东西,以便任何来自Angular 1背景的人都可以通过比较A1和A2来轻松获得这个概念).在内部销毁控制器实例的角度时,会在元素和放大器上发出$destroy事件. $元素的范围.因此,通过监听$destroy事件,我们过去常做的事情是确保那些对象值/对象/事件不可用.

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

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