-
-
Save bentzibentz/7409f7c05be989c5d65b14617cfec3f4 to your computer and use it in GitHub Desktop.
Easy and secure way to organize subscriptions in angular 6 (and less)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Subscription} from 'rxjs/Subscription'; | |
| /* | |
| If you are using subscriptions in a component these should always be unsubscribed when the component is destroyed. | |
| In order to make it easier to handle subscriptions this class can be used. | |
| How to use it: | |
| 1.) Create an private attribute "private subscrManager = new SubscriptionManager();" in your component | |
| 2.) Wrap your subscription calls in: | |
| this.subscrManager.add(someObservable.subscribe(()=>{ | |
| // some code | |
| })); | |
| 3.) Implement OnDestroy and ngOnDestroy function like that: | |
| ngOnDestroy(){ | |
| this.subscrManager.destroy(); | |
| } | |
| 4.) That's all! This is a easy and secure way to handle Subscriptions :) | |
| */ | |
| export class SubscriptionManager { | |
| private subscriptions: { | |
| id: number, | |
| subscription: Subscription | |
| }[]; | |
| private counter: number; | |
| constructor() { | |
| this.subscriptions = []; | |
| this.counter = 0; | |
| } | |
| /** | |
| * add subscription to the manager. Returns the id of the subscriptions | |
| * @param subscription | |
| * @returns number | |
| */ | |
| public add(subscription: Subscription): number { | |
| this.subscriptions.push( | |
| { | |
| id: ++this.counter, | |
| subscription: subscription | |
| } | |
| ); | |
| return this.counter; | |
| } | |
| /** | |
| * unsubscribes all subscriptions | |
| */ | |
| public destroy() { | |
| if (!(this.subscriptions === null || this.subscriptions === undefined)) { | |
| for (let i = 0; i < this.subscriptions.length; i++) { | |
| this.subscriptions[i].subscription.unsubscribe(); | |
| } | |
| this.subscriptions = []; | |
| } | |
| } | |
| /** | |
| * unsubscribes specific Subscription with specific id. | |
| * @param id | |
| */ | |
| public remove(id: number): boolean { | |
| for (let i = 0; i < this.subscriptions.length; i++) { | |
| const element = this.subscriptions[i]; | |
| if (element.id === id) { | |
| element.subscription.unsubscribe(); | |
| this.subscriptions.splice(i, 1); | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment