angular - 在路由解析器中调用嵌套的 http 返回 Observable 而不是数据

Question

我正在尝试在 resolve.ts 中调用嵌套的 HTTP 调用。并通过以下方式实现。

app.route.js:
    { 
     path: 'result/:start_date/:end_date', 
     component: ResultComponent,
     resolve:{hnData:ResultResolver}
    }

以下是我的解析器代码

result.resolver.ts

   resolve(route: ActivatedRouteSnapshot) {
   return this.service.firstHttp()
     .pipe(
      map((data)=>{

      param['data_from_firstHttp']= data.result;
      param['checkinDate']=route.paramMap.get('start_date');
      param['checkoutDate']=route.paramMap.get('end_date');

      return this.service.searchListing(param);


   })
 )

和组件代码

result.component.ts

    { hnData : Observable}

在组件中，我期待 serchListing 服务方法的结果，而不是我变得可观察。

Answer 1

firstHttp(): Observable<data1>;
searchListing(): Observable<data2>;

// you are trying to map:
map(Observable<data1>): Observable<Observable<data2>>

问题是 - 如何将其展平？

RxJs 有几种方式:

1) 我们是否需要处理来自每个内部 Observable 的所有事件？
mergeMap/concatMap - 事件的顺序重要吗？

2) 我们可以跳过内部 Observable 的一些事件吗？
switchMap/exhaustMap - 新事件是否具有更高的优先级？

您可以替换 mergeMap 上的 map 来扁平化 Observable。

resolve(route: ActivatedRouteSnapshot) {
  return this.service.firstHttp()
    .pipe(
      mergeMap((data)=>{

        param['data_from_firstHttp']= data.result;
        param['checkinDate']=route.paramMap.get('start_date');
        param['checkoutDate']=route.paramMap.get('end_date');

        return this.service.searchListing(param);
  })
)