Within my Angular2 component, I have a custom 3rd party JQuery plugin that is initialized in the OnInit event. Unfortunately, this 3rd party library uses setIntervals extensively. This poses a problem when navigating away from the view as the intervals remain active and continue to trigger the widget behavior on other views.
The issue lies in the fact that the 3rd party component lacks a way to destroy or clear these intervals. My initial solution was to call destroy() in the Angular2 OnDestroy method.
To address this, I attempted to use Zone for cleanup purposes. Here's what I did:
constructor(elementRef: ElementRef, public zone: NgZone) {
}
ngOnInit() {
this.zone.runOutsideAngular(() => {
$(this.elementRef).3rdPartyWidgetStart();
});}
ngOnDestroy() {
var componentzone=this.zone;
//So do something here to clear intervals set within Zone???
}
My expectation was that this code would clear the intervals upon navigation away. However, this didn't turn out to be the case. I also tried using run instead of runOutsideAngular, but it didn't solve the issue. I then explored the possibility of Zone keeping track of all intervals set and attempting to clear them through that. While Zone does seem to keep track of the intervals, accessing and clearing them proved challenging. Any suggestions using Angular 2 RC - or if I'm approaching this incorrectly with Zones, please advise. As this concept is new to me.