Angular 7-嵌套Observables

Question

我有一个使用参数的Angular路由:client_name，以及一个带方法的服务，该方法getClientDetails(client_name)可从基于的HTTP API中获取数据:client_name。两者都是可观察的方法，它们各自工作，但是当我结合使用两个可观察的方法时，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属性，这与您的初始代码类似。然后，我们getClientDetails()从中调用方法dataService。如果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;
})