Angular 2 Route 解析多个嵌套的 Observables答案

【问题标题】：Angular 2 Route Resolving Multiple Nested ObservablesAngular 2 Route 解析多个嵌套的 Observables
【发布时间】：2017-05-25 15:57:04
【问题描述】：

我有一个 observable，它在订阅时也嵌套了 observables。

它源于一个问题，即在 for 循环中多次调用 api 以获得最终输出。

更具体地说，我首先为小部件调用 api，然后调用 api 以返回我添加到小部件对象的 foo 数组。最后，我循环遍历 foo 数组并检索用于获取 bar 的 foo.id。然后将 Bar 添加到 foo[x] 元素。

当我在路由器中解析小部件时，小部件的属性在那里，但 foo 数组作为可观察对象返回。我想在路由解析之前订阅 foo，然后遍历 foo 并订阅每个 foo 元素中的 bar。

let routes: Routes = [{
  path: 'landing-page',
  component: LandingPageComponent,
  resolve: {
    widget: WidgetResolve,
    foo: FooResolve(widget),
    bar: BarResolve(foo)
  }
}];

【问题讨论】：

标签： angular routes observable resolve

【解决方案1】：

我没有返回嵌套的 observables，而是使用 flatMap 和 forkJoin 来允许多个 api 调用在一个订阅中解决。答案基于Combining multiple Http streams with Observables in Angular 2 的帖子

getWidget(id) {
  return Observable.forkJoin(
    this.service.getWidget(id),
    this.getFoo(id)
    ).map(res => {
      res[0].foo = res[1];
      return res[0];
    });
}


getFoo(id): Observable<any[]> {
  return this.service.getFoo().flatMap(fooArr => {
    return Observable.forkJoin(
      fooArr.map((foo: any) => {
        return this.service.getBar(foo.id, id)
        .map((barArr: any[]) => {
          foo.bar = barArr;
          return foo;
        });
      })
      );
  });
}

【讨论】：