Angular2 - ルート変更時の 'setInterval' HTTPリクエストの停止

Question

Angular2を使用してリアルタイム更新グラフを作成しています。私のグラフは、観測可能なhttpと、setIntervalコマンドを経由して来るデータによって更新されています。

奇妙なことに私が気づいたのは、アプリケーションの別のビューに角を通ると、前のコンポーネントのsetIntervalコマンドが停止せず、サーバーに不必要な負荷がかかります。

setInterval Angular2のルート変更に関するHTTPリクエストを停止する正しい方法は何でしょうか？

助けていただければ幸いです。

Answer 1

Events are managed very differently by browsersであり、基本的にはイベントループで処理されます。

ブラウザが内部ループを持っている、キュー をチェックし、イベントを処理イベントループ、と呼ばれる、などの機能を実行

だから、setTimeout/setIntervalのような任意の非同期イベントを追加するたびに、彼らイベントループにハンドラが追加されます。

これらの非同期イベントをstop/de-registerにする場合は、手動で登録を解除する必要があります。ここでは、そのsetIntervalオブジェクト参照でclearIntervalメソッドを呼び出す必要があります。イベントはEvent Loopから削除されます。

ライフサイクルフックngOnDestroyを使用して、コンポーネントを破壊する前に自分のものを持てるようにすることができます。

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

---

余分なもの（角1と比較すると）

あなたはどのJavascriptのフレームワークで見ることができ、問題の同じ種類。角度1では、この種の状況を処理する方法があります（A1とA2を比較することによって、Angular 1の背景の誰でも簡単にこの概念を得ることができるように、このようなものを追加します）。 controllerインスタンスを内部的に破棄すると、その要素のelement & $scope以上のイベントが発生しますが、内部では$destroyイベントが発生します。したがって、リスナーを$destroyイベント以上にすることによって、私たちはこれらのオブジェクトvalue/object/eventsが使用できないようにするために物事をしました。

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

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