Angular 7 - 嵌套 Observables

Question

我有一个 Angular 路由，它使用参数 :client_name，以及一个使用方法 getClientDetails(client_name) 的服务来从基于 :client_name 的 HTTP API 获取数据。两者都是独立工作的 Observable 方法，但是当我结合 2 个 observable 时，API 调用会在获取参数之前运行（client_name 未定义）：

    this.route.params.subscribe(params => {
  this.client_name = params['client_name'];
  this.dataService.getClientDetails(this.client_name).subscribe(
    clientdata => {
      this.client = clientdata;
      console.log(clientdata);
    });

如何链接两个可观察对象，以便 API 仅在返回 :client_name 后运行？

Answer 1

我们可以在这个场景中使用 pipeable RxJS 操作符。

首先，我们可以使用 RxJS 的 mergeMap 将来自 route 的 observable 值映射到内部 observable 中。如果定义了params 和params['client_name']，我们将params['client_name'] 分配给client_name 属性，这与您的初始代码类似。然后，我们从dataService 调用getClientDetails() 方法。如果params 不存在，我们将null 转换为可观察对象，并返回它。

随后，可观察对象在.subscribe() 块中返回。从那里，我们可以将响应分配给client 属性。

import { mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';
.
.
this.route.params.pipe(
  mergeMap(params => {
    if (params && params['client_name']) {
      this.client_name = params['client_name'];
      return this.dataService.getClientDetails(this.client_name);
    } else {
      return of(null)
    }
  })
).subscribe(response => {
  // handle the rest
  this.client = response;
})