如何在 RxJS 6 的管道中启动 observable？答案

【问题标题】：How to start observable in the pipe in RxJS 6?如何在 RxJS 6 的管道中启动 observable？
【发布时间】：2020-07-24 08:37:37
【问题描述】：

我的 Angular 项目中有这个 RxJS 代码：

settingsService.getSetting('setting-name').pipe(
  map((setting: SettingInterface) => {
    // ...

    return setting;
  }),
  tap((setting: SettingInterface) => this.settingService.save(setting)),
  map((setting: SettingInterface) => {
    // ...
  })
);

在这段代码中，this.settingService.save(setting) 也是一个Observable，它没有被订阅。

如何在管道中启动这个 observable，等待它并继续？

重要：

save() observable 必须在之前的map() 运算符之后开始
save() observable 的结果与管道无关，我想删除它
save() observable 必须在下一个 map() 运算符之前开始

有没有 RxJS 操作符可以做到这一点？

【问题讨论】：

像这样使用concatMap concatMap((setting: SettingInterface) => this.settingService.save(setting))

标签： angular rxjs observable rxjs6

【解决方案1】：

当你有一个依赖于另一个 observable 的 observable 时，你可以使用 RxJS 的高阶映射运算符之一，例如 switchMap、concatMap、flatMap 或 exhaustMap。每个人都有自己的目的。 Here's 一个很好的概要。本质上，在订阅时，他们将一个可观察对象转换为另一个并返回修改后的可观察对象。

我将使用switchMap 来说明。

settingsService.getSetting('setting-name').pipe(
  map((setting: SettingInterface) => {
    // ...

    return setting;
  }),
  switchMap((setting: SettingInterface) => 
    this.settingService.save(setting).pipe(map(_ => setting))
  ),
  map((setting: SettingInterface) => {
    // ...
  })
);

你会注意到我已经将另一个 map 传递到内部 obesrvable：.pipe(map(saved => setting))。如果没有这个，下面的外部map 将接收来自this.settingService.save(setting) 的输出，而不是您需要的setting 变量。

【讨论】：