Question

我有一个使用参数:client_name的Angular路由，以及一个带有方法getClientDetails(client_name)的服务，用于从基于:client_name的HTTP API中获取数据。两者都是可观察的方法，它们各自工作，但是当我结合使用这两个可观察的方法时，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;
})

Angular 7-嵌套Observables

1 个答案: