Observables (rxjs) nested subscriptions in angular project

Question

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;
      }

Chris R · Accepted Answer · 2021-02-05T23:09:46.937

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.

Thanks. But I need to subscribe the resolved observable on ngOnInit to access the res data, right? — B0r1, Feb 05 '21 at 23:43
I implemented with your advices and it does work. Unfortunately I can't save the document anymore. It might be a similar problem, because it is also nested like getting the data — B0r1, Feb 06 '21 at 00:57
Here is also more information about resolver on angular.io: https://angular.io/guide/router-tutorial-toh#resolve-pre-fetching-component-data — B0r1, Feb 06 '21 at 01:45

Observables (rxjs) nested subscriptions in angular project

1 Answers1