Angular 7 - 嵌套 Observables

Question

我有一个 Angular 路由，它使用参数 :client_name 和一个具有方法 getClientDetails(client_name) 的服务，用于从基于 的 HTTP API 获取数据:client_name。两者都是独立工作的 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

我们可以在这种情况下使用可管道的 RxJS 运算符。

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

随后，可观察值将在 .subscribe() block 中返回。从那里，我们可以将响应分配给 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;
})