refactor(demo): unsubscribe when destroy component

peterlai107 · Sep 20, 2017 · cceabef · cceabef
1 parent 549be76
commit cceabef
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 37 deletions.
diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
 
 import { UserService } from '../../../@core/data/users.service';
@@ -8,19 +8,20 @@ import { UserService } from '../../../@core/data/users.service';
   styleUrls: ['./contacts.component.scss'],
   templateUrl: './contacts.component.html',
 })
-export class ContactsComponent implements OnInit {
+export class ContactsComponent implements OnInit, OnDestroy {
 
   contacts: any[];
   recent: any[];
   breakpoint: NbMediaBreakpoint;
   breakpoints: any;
+  themeSubscription: any;
 
   constructor(private userService: UserService,
               private themeService: NbThemeService,
               private breakpointService: NbMediaBreakpointsService) {
 
     this.breakpoints = breakpointService.getBreakpointsMap();
-    themeService.onMediaQueryChange()
+    this.themeSubscription = themeService.onMediaQueryChange()
       .subscribe(([oldValue, newValue]) => {
         this.breakpoint = newValue;
       });
@@ -51,4 +52,8 @@ export class ContactsComponent implements OnInit {
         ];
       });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 declare const echarts: any;
@@ -10,11 +10,11 @@ declare const echarts: any;
     <div echarts [options]="option" class="echart"></div>
   `,
 })
-export class ElectricityChartComponent implements AfterViewInit {
-
+export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
 
   option: any;
   data: Array<any>;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
 
@@ -41,7 +41,7 @@ export class ElectricityChartComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
       const eTheme: any = config.variables.electricity;
 
       this.option = {
@@ -184,4 +184,8 @@ export class ElectricityChartComponent implements AfterViewInit {
         };
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 import { ElectricityService } from '../../../@core/data/electricity.service';
@@ -8,20 +8,25 @@ import { ElectricityService } from '../../../@core/data/electricity.service';
   styleUrls: ['./electricity.component.scss'],
   templateUrl: './electricity.component.html',
 })
-export class ElectricityComponent {
+export class ElectricityComponent implements OnDestroy {
 
   data: Array<any>;
 
   type: string = 'week';
   types = ['week', 'month', 'year'];
 
   currentTheme: string;
+  themeSubscription: any;
 
   constructor(private eService: ElectricityService, private themeService: NbThemeService) {
     this.data = eService.getData();
 
-    this.themeService.getJsTheme().subscribe(theme => {
+    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
       this.currentTheme = theme.name;
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/kitten/kitten.component.ts b/src/app/pages/dashboard/kitten/kitten.component.ts
@@ -1,18 +1,23 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-kitten',
   styleUrls: ['./kitten.component.scss'],
   templateUrl: './kitten.component.html',
 })
-export class KittenComponent {
+export class KittenComponent implements OnDestroy {
 
   currentTheme: string;
+  themeSubscription: any;
 
   constructor(private themeService: NbThemeService) {
-    this.themeService.getJsTheme().subscribe(theme => {
+    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
       this.currentTheme = theme.name;
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, OnDestroy } from '@angular/core';
 import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
 
 @Component({
@@ -12,20 +12,21 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
     </nb-card>
   `,
 })
-export class RoomsComponent {
+export class RoomsComponent implements OnDestroy {
 
   @HostBinding('class.expanded')
   private expanded: boolean;
   private selected: number;
 
   breakpoint: NbMediaBreakpoint;
   breakpoints: any;
+  themeSubscription: any;
 
   constructor(private themeService: NbThemeService,
               private breakpointService: NbMediaBreakpointsService) {
 
     this.breakpoints = breakpointService.getBreakpointsMap();
-    themeService.onMediaQueryChange()
+    this.themeSubscription = themeService.onMediaQueryChange()
       .subscribe(([oldValue, newValue]) => {
         this.breakpoint = newValue;
       });
@@ -56,4 +57,8 @@ export class RoomsComponent {
   private isSelected(roomNumber): boolean {
     return this.selected === roomNumber;
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input } from '@angular/core';
+import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 declare const echarts: any;
@@ -20,7 +20,7 @@ declare const echarts: any;
     </nb-card>
   `,
 })
-export class SolarComponent implements AfterViewInit {
+export class SolarComponent implements AfterViewInit, OnDestroy {
 
   private value: number = 0;
 
@@ -35,12 +35,13 @@ export class SolarComponent implements AfterViewInit {
   }
 
   option: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
 
       const solarTheme: any = config.variables.solar;
 
@@ -176,4 +177,8 @@ export class SolarComponent implements AfterViewInit {
       });
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts
@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-temperature',
   styleUrls: ['./temperature.component.scss'],
   templateUrl: './temperature.component.html',
 })
-export class TemperatureComponent {
+export class TemperatureComponent implements OnDestroy {
 
   temperature: number = 24;
   temperatureOff: boolean = false;
@@ -17,10 +17,15 @@ export class TemperatureComponent {
   humidityMode = 'heat';
 
   colors: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
       this.colors = config.variables;
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 declare const echarts: any;
@@ -12,17 +12,18 @@ const points = [300, 520, 435, 530, 730, 620, 660, 860];
     <div echarts [options]="option" class="echart"></div>
   `,
 })
-export class TrafficChartComponent implements AfterViewInit {
+export class TrafficChartComponent implements AfterViewInit, OnDestroy {
 
   type: string = 'month';
   types = ['week', 'month', 'year'];
   option: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
 
       const trafficTheme: any = config.variables.traffic;
 
@@ -142,4 +143,8 @@ export class TrafficChartComponent implements AfterViewInit {
       });
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -24,14 +24,19 @@ import { NbThemeService } from '@nebular/theme';
     </nb-card>
   `,
 })
-export class TrafficComponent {
+export class TrafficComponent implements OnDestroy {
   type: string = 'month';
   types = ['week', 'month', 'year'];
   currentTheme: string;
+  themeSubscription: any;
 
   constructor(private themeService: NbThemeService) {
-    this.themeService.getJsTheme().subscribe(theme => {
+    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
       this.currentTheme = theme.name;
     });
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }
diff --git a/src/app/pages/maps/bubble/bubble-map.component.ts b/src/app/pages/maps/bubble/bubble-map.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -13,7 +13,7 @@ import { NbThemeService } from '@nebular/theme';
     </nb-card>
   `,
 })
-export class BubbleMapComponent {
+export class BubbleMapComponent implements OnDestroy {
 
   latlong: any = {};
   mapData: any[];
@@ -23,10 +23,11 @@ export class BubbleMapComponent {
 
   bubbleTheme: any;
   geoColors: any[];
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
 
-    this.theme.getJsTheme()
+    this.themeSubscription = this.theme.getJsTheme()
       .subscribe(config => {
 
         const colors = config.variables;
@@ -525,6 +526,10 @@ export class BubbleMapComponent {
       });
   }
 
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
+
   private getRandomGeoColor() {
     const index = Math.round(Math.random() * this.geoColors.length);
     return this.geoColors[index];

diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
@@ -1,18 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-hero-buttons',
   styleUrls: ['./hero-buttons.component.scss'],
   templateUrl: './hero-buttons.component.html',
 })
-export class HeroButtonComponent {
+export class HeroButtonComponent implements OnDestroy {
 
   themeName: string = 'default';
   settings: Array<any>;
+  themeSubscription: any;
 
   constructor(private themeService: NbThemeService) {
-    this.themeService.getJsTheme().subscribe(theme => {
+    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
       this.themeName = theme.name;
       this.init(theme.variables);
     });
@@ -115,4 +116,8 @@ export class HeroButtonComponent {
       },
     }];
   }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+  }
 }