Question

64

Angular 2: why use switchMap when retrieving route params?

rated 0 times [ 69] [ 5] / answers: 1 / hits: 21573 / 7 Years ago, tue, march 7, 2017, 12:00:00

I'm reading the Angular Guide about Routing & Navigation.

They use this code for retrieving the router's param 'id' and using it to get a hero with the service service:

ngOnInit() {

  this.route.params

    .switchMap((params: Params) => this.service.getHero(+params['id']))

    .subscribe((hero: Hero) => this.hero = hero);

}

But I do not well understand what is the purpose of using the switchMap operator in the above code.

The following code would not be the same?

ngOnInit() {

  this.route.params

    // NOTE: I do not use switchMap here, but subscribe directly

    .subscribe((params: Params) => {

      this.service.getHero(+params['id']).then(hero => this.hero = hero)

    });

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kadinl

Add To Favorites

Follow

Total Points: 321

Total Questions: 117

Total Answers: 103

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 7 Years ago margaritakristinak · Accepted Answer

switchMap is usually used when you have some async operation that is triggered by some prepended event/stream.

The difference to e.g. flatMap or concatMap is, that as soon as the next trigger emits, the current async operation is canceled and re-triggered.

In your case this means, that as soon as the route-params change, your hero-service is automatically called again with the changed params and the previous call is canceled so you won't receive outdated data.

This is especially helpful for search-queries that might take longer then 200-300ms and are triggered while a user is typing.

The following code would not be the same?

No. While it might behave the same in many cases, if you imagine the following scenario:

param changes to 4

getHero(4) (a very slow request)

param changes to 1

getHero(1) (a fast request)

getHero(1) completes -> hero is 1

getHero(4) completes -> hero is now 4 but the last used param was 1

In such a case switchMap would just discard the getHero(4)-call since it is outdated as soon as a new trigger happens.