角嵌套路由paramMap订阅

Question

I think this is a more rxjs related question, but I'm facing it in my Angular App.

we have in our application nested subscription of router event.

I'll try to explain step-by-step how the code works.

We have a DropDown with a list of contracts. And we have a DropDown with a list of years.

Once the user change the selection in the contracts DropDown we need to navigate and put the contract id in the URL with the selected contract id, then we have to load the years related to this contract id, we subscribe to the router event:

this.activatedRoute.parent.paramMap
  .map(m => +m.get("contractId"))
  .distinctUntilChanged()
  .subscribe(contractId => {
      // CALL SERVICE TO LOAD DROPDOWN WITH YEARS
  })

The user can also change the year in the years DropDown.

Once the user change the selection in the years DropDown, we also have to navigate and update the URL with the selected year, then we need to load a grid with data, that is how it looks:

this.activatedRoute.parent.paramMap
  .map(m => +m.get("contractId"))
  .distinctUntilChanged()
  .subscribe(contractId => {
      // CALL SERVICE TO LOAD DROPDOWN WITH YEARS

      this.activatedRoute.queryParamMap
        .map(m => +m.get("year"))
        .distinctUntilChanged()
        .subscribe(year => {
        // CALL SERVICE TO LOAD GRID WITH DATA
      })
  });

The problem here is that everytime the contract id changes, I create a new subscription of the this.activatedRoute.queryParamMap , that means, several duplicated http requests.

I also tried using unsubscribe but the DropDown with the years won't trigger the subscription anymore when the selection changes.

What is the best way to solve such a nested call?

EDIT :

I fixed it - not so elegantly IMO:

let subscription = new Subscription();

this.activatedRoute.parent.paramMap
  .map(m => +m.get("contractId"))
  .distinctUntilChanged()
  .subscribe(contractId => {
      subscription.unsubscribe();

      // CALL SERVICE TO LOAD DROPDOWN WITH YEARS

      subscription = this.activatedRoute.queryParamMap
        .map(m => +m.get("year"))
        .distinctUntilChanged()
        .subscribe(year => {
        // CALL SERVICE TO LOAD GRID WITH DATA
      })
  });

Maybe rxjs offers a more elegant way of solving this?

EDIT:

I created a plunker to ilustrate the scenario:

https://plnkr.co/edit/Z3AqcayxSALiWGoI7KRE?p=preview

Answer 1

The solution was using switchMap instead of several subscribers , here we go:

this.activatedRoute.parent.paramMap
.map(m => +m.get("contractId"))
.distinctUntilChanged()
.switchMap(contractId => {
  // CALL SERVICE TO LOAD DROPDOWN WITH YEARS

  return this.activatedRoute.queryParamMap
    .map(m => +m.get("year"))
    .distinctUntilChanged()
    .switchMap(year => {
    // CALL SERVICE TO LOAD GRID WITH DATA
  })
}).subscribe(() => {});

Answer 2

OK, I spent some time with the Plunker. I updated the ngOnInit as follows:

  ngOnInit() {
    let contractId;
    let year;

    this.activatedRoute.parent.paramMap
        .subscribe(params => {
          this.contractId = params.get('contractId');
          console.log("Selected contract Id: " + this.contractId);
          // Code to populate the years from the contractid
        })

    this.activatedRoute.queryParamMap
      .subscribe(params => {
        this.year = params.get('year');
        console.log("Selected year: " + this.year)
        if (this.year) {
          this.loadGrid(this.contractId, this.year);
        } else {
          // Clear grid??
        }
      });
  }

The first subscription watches for changes to the contract and gets new years.

The second subscription watches for changes to the year query parameter and reloads the grid.

I don't think you want one within the other because that adds multiple subscriptions.

Is this what you were trying to achieve?

Updated plunker: https://plnkr.co/edit/7Pn6HX3D6fZ8iHdylbUW?p=preview