Угловой 2 Маршрут, разрешающий множественные вложенные наблюдения

Question

У меня есть наблюдаемый, который имеет вложенные наблюдаемые при подписке.

Это связано с проблемой, когда api вызывается несколько раз в цикле for, чтобы получить окончательный вывод.

В некоторой степени я сначала вызываю api для виджета, затем я вызываю api для возврата массива foo, который я добавляю к объекту виджета. Наконец, я прохожу через массив foo и извлекаю foo.id, который используется для получения бара. Затем панель добавляется в элемент foo [x].

Когда я разрешаю виджет в маршрутизаторе, есть атрибуты виджета, но массив foo возвращается как наблюдаемый. Я хочу подписаться на foo до того, как маршрут будет разрешен, а затем прокрутите foo и подпишитесь на панель в каждом элементе foo.

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

Answer 1

Вместо возврата вложенных наблюдаемыми, я использовал flatMap и forkJoin, чтобы позволить множественным апи вызовы решить в один подписаться. Ответ был основан на сообщении от 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; 
     }); 
     }) 
    ); 
    }); 
}