CODEWITHSUNDEEP
angularrxjsnestedobservablesubscription
B0r1
B0r1

Reputation: 470

Observables (rxjs) nested subscriptions in angular project

What is a better alternative to simplify my nested code below? The code does work, but I do know that nested subscriptions aren't good what I've read. I am also not sure if I should use mergeMap() or switchMap() in this particular example.

private subscriptions: Subscription = new Subscription();

ngOnInit() {
        this.subscriptions.add(this._route.paramMap.subscribe((paramMap: ParamMap) => {
          if (this.docType === 'invoice' && paramMap.has('invoiceId')) {
            this.mode = 'edit';
            this.subscriptions.add(this._invoiceService.getInvoice(this.invoiceId).subscribe(invoiceData => {
            //something here}));
          }
          else if (this.docType === 'quote' && paramMap.has('quoteId')) {
            this.mode = 'edit';
            this.subscriptions.add(this._quoteService.getQuote(this.quoteId).subscribe((invoiceData) => {//do something
            }));
          }
          else {
            //do something
            this.subscriptions.add(this._route.params.subscribe(params => {
              this.relatedProjectId = params['projectId']
            }));
           this.subscriptions.add(this._companyService.getCompany().subscribe(
              res => {
                this.showOwnCompany(res);
              }
            ))
          }
        }
        ));
        this.isOpen = true;
      }

Upvotes: 0

Views: 173

Answers (1)

Chris R
Chris R

Reputation: 276

You could remove the route paramMap subscriber, and instead use a resolver to replace this whole init process.

// someWork.resolver.ts

export class SomeWorkResolver implements Resolve<any> {

    constructor(
      private router: Router
      private invoiceService: InvoiceService,
      private quoteService: QuoteService
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
      if(route.param.has('invoiceId') {
          return this.invoiceService.getInvoice();
      } 
      if(route.param.has('quoteId') {
          return this.quoteService.getQuote();
      } 
      // implement the remainder
      return EMPTY;
    }

}

In your router simply add:

{
    path: 'somePath',
    component: SomeComponent,
    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
    resolve: {
        information: SomeWorkResolver
    }
}

And now in your actual ngOnInit:

ngOnInit() {
  // this has the information returned from the service call. 
  // can you use this information to determine what call was made?
  // IE Quote / Invoice / etc
  this.router.snapshot.data.information;
}

Doing it this way, will also not load the component until the resolver... resolves. So can also avoid that line "this.isOpen = true" which i am guessing is a hack to wait for process' to finish.

Upvotes: 1

Related Questions