时间戳

首页 > 解决方案 > Resolver 中的链相关 Observables

angular - Resolver 中的链相关 Observables

问题描述

我有一个解析器，需要在加载页面之前从两个依赖的 API 中获取数据。第二个调用是由第一个调用的结果定义的，所以我尝试链接两个 observables，并且需要在解析器的末尾返回第二个调用。

在我尝试链接我拥有的可观察对象之前：

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MySecondObservable> {
        
        const observable1 = this.myService.getFirstDataSet();
        observable1.subscribe(
             firstDataSet => this.myService.firstDataSet = firstDataSet;
        );
    
        const observable2 = this.myService.getSecondDataSet(); // this requires data from firstDataSet
        observable2.subscribe(
             secondDataSet => this.myService.secondDataSet = secondDataSet;
        );

        return observable2;
    }

这显然是错误的，当我尝试应用一些 RxJs 方法来管道这些 observables 时，我在第二个 observable 调用中收到一个错误，指出 firstDataSet 未定义。这是我到目前为止得到的：

    return observable1.pipe(
        tap( firstDataSet => this.myService.firstDataSet = firstDataSet),
        mergeMap( () => observable2.pipe(
            tap(secondDataSet => this.myService.secondDataSet = secondDataSet            
            ) 
        )
    )

在每个可观察到的最终结果中，我想将接收到的数据存储到服务中，因此tap(). RxJS 上有大量的文档，我发现作为初学者很难找到我想要的东西。任何帮助表示赞赏！

编辑：

我按照建议修改了代码，但仍然出现错误。

const observable2 = this.myService.getSecondDataSet();

此方法需要解析 firstDataSet 才能工作。但是myService.firstDataSet未定义的控制台日志。

标签： angularrxjsobservable

解决方案

如果我正确理解了这个问题（您想进行 API 调用，等待它完成，然后根据结果发送另一个 API 请求），那么您需要使用switchMap运算符：

return observable1.pipe(
    tap( firstDataSet => this.myService.firstDataSet = firstDataSet),
    switchMap( observable1Result => observable2 ),
    tap(secondDataSet => this.myService.secondDataSet = secondDataSet)            

)

推荐阅读