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

Question

我正在使用 Angular2 编写实时更新图表。我的图表正在通过来自 http 可观察对象和 setInterval 命令的数据进行更新。

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

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

如有任何帮助，我们将不胜感激。

Answer 1

Events are managed very differently by browsers,基本上都是事件循环.

处理的

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

因此，每当您添加 setTimeout/setInterval 等任何异步事件时，它们都会与它们的处理程序一起添加到 Event Loop。

基本上，只要您想 stop/de-register 那些异步事件，您都需要手动注销它们。就像这里一样，您需要使用该 setInterval 对象引用调用 clearInterval 方法，然后只有它会从 Event Loop.

中删除该 async 事件

您可以使用 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).在销毁 controller 实例 angular 内部时，会在该元素的 element 和 $scope 上发出 $destroy 事件。因此，通过监听 $destroy 事件，我们过去常常做一些事情来确保那些对象 value/object/events 不可用。

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

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

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

Angular2 - stopping 'setInterval' http requests on route change

asynchronous

setinterval

observable

angular2-routing

angular