Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Angular, is this a valid way to check whether an observable subscription is open before attempting to close it?

In Angular, is this a valid way of checking whether an observable subscription is open before attempting to close it? It seems to produce the correct behavior. That is, it only closes subscriptions that are open. What I am wondering is whether there is some more "correct" way of doing it in Angular.

import { Component, OnUpdate, OnDestroy } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { VoteService } from '../../services/vote.service';

export class Foo implements OnUpdate, OnDestroy {

  private voteSubscription;

  constructor(private afs: AngularFirestore,public voteService: VoteService) {}

  ngOnUpdate() {

    /* Lots of complicated things happen here which result in voteSubscription
       being opened and closed based on external conditions including but not
       limited to auth state. Bottom line is that sometimes the subscription
       is active and sometimes it's not. */

       if ( CONSTANTLY_CHANGING_INPUT_CONDITIONS ) {
          this.voteSubscription = this.voteService.getUserVotes().subscribe();
        } else {
          if (this.voteSubscription) {
            this.voteSubscription.unsubscribe();
          }
        }

  }

  ngOnDestroy() {

    /* Avoid producing a console error if we try to close a subscription that is
       already closed. */
    if (this.voteSubscription) {
      this.voteSubscription.unsubscribe();
    }

  }

}
like image 753
Derrick Miller Avatar asked Aug 25 '18 06:08

Derrick Miller


People also ask

How to subscribe to observable methods in Angular 2+ forms?

During the implementation of Template-driven or Reactive Angular 2+ forms, we may need to get the Form status inside or emit out the validation status through Properties or Emit events outside to some other component. To achieve this we can subscribe to two available Observable methods available with form object.

How do you subscribe in angular?

Angular is a platform for building mobile and desktop web applications. ... You subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications. In order to show how subscribing works, we need to create a new observable. There is a constructor that you use to create new instances, but for ...

What is the use of unsubscribe () function in observable?

A Subscription essentially just has an unsubscribe () function to release resources or cancel Observable executions. To prevent this memory leaks we have to unsubscribe from the subscriptions when we are done with.

How to unsubscribe from observables in RxJS?

We can gather them subscriptions in an array and unsubscribe from them in the ngOnDestroy: @Component ( {...}) Observables subscribe method returns an object of RxJS’s Subscription type. This Subscription represents a disposable resource.


2 Answers

The Subscription object also has a closed property that one can use to check if the stream was already unsubscribed (completed or had an error).

So if you want you can use it also in the if statement:

if (this.voteSubscription && !this.voteSubscription.closed) 

However this is not needed, RxJs does this internally for us. Inside the unsubscribe method you'll find something like:

if (this.closed) {
      return;
    }

So one can safely call unsubscribe without having to worry the the stream might have been closed already.

like image 122
Adrian Fâciu Avatar answered Oct 04 '22 03:10

Adrian Fâciu


You can use this too:

import {Subscriber} from 'rxjs';

this.voteSubscription instanceof Subscriber // returns true if is a subscriber
like image 23
Black Mamba Avatar answered Oct 04 '22 02:10

Black Mamba