angular - 如何根据先前请求的数据创建具有多个请求的解析器​​？

Question

我有一个组件，它从单个 HTTP 请求中检索其业务对象，然后有几个后续请求来填充下拉列表。这些后续请求中的参数由来自业务对象的数据组成，因此这些请求在第一个请求完成之前无法开始。

给定一个示例 resolver PersonResolver，这是我想要实现的流程：

1. 打电话this.personService.getPersonData()。返回类型Observable<PersonModel>。
2. PersonModel使用我们将调用的返回实例personData来调用this.personService.getAdditionalData1(personData.foo)and this.personService.getAdditionalData2(personData.bar)。两者都返回类型any[]。
3. 方法的返回类型Observable<PersonModel, any[], any[]>。resolve

我想将它实现到组件的解析器中，但是我很难理解正确使用 RxJS 来完成这项工作。

这是我到目前为止所得到的。我很快就被卡住了。

constructor(private personService: PersonService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PersonModel, any[], any[]> | Observable<Observable<PersonModel, any[], any[]>> | Promise<Observable<PersonModel, any[], any[]>> {
  this.personService.getPersonData().subscribe(personData => {
      // what to put in here?
  });
}

Answer 1

首先，您需要使用mergeMap才能PersonModel从第一次调用中传递模型。然后，您需要使用zip将所有结果放在一个数组中。

    this.personService.getPersonData.pipe(
      mergeMap(
        personData => zip(
          of(personData),
          of(getAdditionalData1(personData.foo)),
          of(getAdditionalData2(personData.bar))
        )
      )
    ).subscribe(allData => {
      // here you will have all of the data placed in 'allData' param
    });

查看这个简单的StackBlitz DEMO以了解实际情况

Answer 2

尝试这样的事情......

注意：阅读此

constructor(private personService: PersonService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PersonModel, any[], any[]> | Observable<Observable<PersonModel, any[], any[]>> | Promise<Observable<PersonModel, any[], any[]>> {
  return this.personService.getPersonData().pipe(
    mergeMap(personData => this.personService.getAdditionalData1(personData.foo)),
    mergeMap(this.personService.getAdditionalData2(personData.bar)));
}

Answer 3

还有一个版本

this.personService
  .getPersonData()
  .pipe(
    mergeMap(personData =>
      merge(
        this.personService.getAdditionalData1(personData.foo),
        this.personService.getAdditionalData2(personData.bar)
      )
    )
  )
  .subscribe(
    r => console.log('Response', r),
    e => console.log(e),
    () => console.log('Done')
  );