fix: unsubscribe ChangeFilter subscriptions onDestroy (#387)

Author: xieziyu

README.md

@@ -54,6 +54,10 @@ A starter project on Github: https://github.com/xieziyu/ngx-echarts-starter
 
 # Latest Update
 
+- 2023.03.20: v15.0.2:
+
+  - Fix: unsubscribe ChangeFilter subscriptions onDestroy.
+
 - 2022.12.01: v15.0.1:
 
   - Feat: Support nullable @Inputs. Issue [#378](https://github.com/xieziyu/ngx-echarts/issues/378)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-echarts",
-  "version": "15.0.1",
+  "version": "15.0.2",
   "author": "Xie, Ziyu",
   "license": "MIT",
   "keywords": [

projects/ngx-echarts/package.json

@@ -0,0 +1,55 @@
+import { SimpleChanges } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+
+export class ChangeFilterV2 {
+  private subject = new Subject<SimpleChanges>();
+  private subscriptions: Subscription = new Subscription();
+
+  doFilter(changes: SimpleChanges) {
+    this.subject.next(changes);
+  }
+
+  dispose() {
+    this.subscriptions.unsubscribe();
+  }
+
+  notEmpty<T>(key: string, handler: (t: T) => void) {
+    this.subscriptions.add(this.subject.subscribe(changes => {
+      if (changes[key]) {
+        const value: T = changes[key].currentValue;
+        if (value !== undefined && value !== null) {
+          handler(value);
+        }
+      }
+    }));
+  }
+
+  has<T>(key: string, handler: (t: T) => void) {
+    this.subscriptions.add(this.subject.subscribe(changes => {
+      if (changes[key]) {
+        const value: T = changes[key].currentValue;
+        handler(value);
+      }
+    }));
+  }
+
+  notFirst<T>(key: string, handler: (t: T) => void) {
+    this.subscriptions.add(this.subject.subscribe(changes => {
+      if (changes[key] && !changes[key].isFirstChange()) {
+        const value: T = changes[key].currentValue;
+        handler(value);
+      }
+    }));
+  }
+
+  notFirstAndEmpty<T>(key: string, handler: (t: T) => void) {
+    this.subscriptions.add(this.subject.subscribe(changes => {
+      if (changes[key] && !changes[key].isFirstChange()) {
+        const value: T = changes[key].currentValue;
+        if (value !== undefined && value !== null) {
+          handler(value);
+        }
+      }
+    }));
+  }
+}

projects/ngx-echarts/src/lib/change-filter-v2.ts

@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { Observable, Subject, Subscription, asyncScheduler } from 'rxjs';
 import { switchMap, throttleTime } from 'rxjs/operators';
-import { ChangeFilter } from './change-filter';
+import { ChangeFilterV2 } from './change-filter-v2';
 import type { EChartsOption, ECharts } from 'echarts';
 
 export interface NgxEchartsConfig {
@@ -95,6 +95,7 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
   private resize$ = new Subject<void>();
   private resizeSub: Subscription;
   private initChartTimer?: number;
+  private changeFilter = new ChangeFilterV2();
 
   constructor(
     @Inject(NGX_ECHARTS_CONFIG) config: NgxEchartsConfig,
@@ -105,11 +106,7 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const filter = ChangeFilter.of(changes);
-    filter.notFirstAndEmpty<any>('options').subscribe((opt) => this.onOptionsChange(opt));
-    filter.notFirstAndEmpty<any>('merge').subscribe((opt) => this.setOption(opt));
-    filter.has<boolean>('loading').subscribe((v) => this.toggleLoading(!!v));
-    filter.notFirst<string | ThemeOption>('theme').subscribe(() => this.refreshChart());
+    this.changeFilter.doFilter(changes);
   }
 
   ngOnInit() {
@@ -126,6 +123,11 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
       }))
       this.resizeOb.observe(this.el.nativeElement);
     }
+
+    this.changeFilter.notFirstAndEmpty('options', (opt) => this.onOptionsChange(opt));
+    this.changeFilter.notFirstAndEmpty('merge', (opt) => this.setOption(opt));
+    this.changeFilter.has<boolean>('loading', (v) => this.toggleLoading(!!v));
+    this.changeFilter.notFirst<string | ThemeOption>('theme', () => this.refreshChart());
   }
 
   ngOnDestroy() {
@@ -139,6 +141,7 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
     if (this.resizeOb) {
       this.resizeOb.unobserve(this.el.nativeElement);
     }
+    this.changeFilter.dispose();
     this.dispose();
   }