Question

我正在阅读Angular Guide about Routing & Navigation。

他们使用此代码检索路由器的参数'id'并使用它来获取具有service服务的英雄：

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

但我不太清楚在上面的代码中使用switchMap运算符的目的是什么。

以下代码不一样？

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

Answer 1

switchMap通常在您使用由某些前置“事件/流”触发的异步操作时使用。

与...的区别flatMap或concatMap是，一旦下一个触发器发出，当前的异步操作就会被取消并重新触发。

在你的情况下，这意味着，一旦route-params改变，你的英雄服务会被更改的参数再次自动调用，并且之前的呼叫被取消，因此你不会收到过时的数据。

这对于搜索查询特别有用，搜索查询可能需要超过200-300毫秒，并在用户输入时触发。

以下代码不一样？

没有。虽然在许多情况下它可能表现相同，但如果您想象以下情况：

param更改为“4”
getHero(4)（请求速度很慢）
param更改为“1”
getHero(1)（快速请求）
getHero(1)完成 - ＆gt;英雄是“1”
getHero(4)完成 - ＆gt;英雄现在是“4”但最后使用的参数是“1”

在这种情况下，switchMap只会放弃getHero(4) - 调用，因为一旦发生新触发，它就会过时。

Angular 2：为什么在检索路由参数时使用switchMap？

1 个答案: