我正在使用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 })