Angular 8 解析器 - 如何從一個解析器獲取數據作為其他解析器的輸入？

Question

我有 2 個 REST API。 需要來自 API 的數據。 同時，第 2 個 API 將來自 API 1 的輸入作為參數。

GET api/one --> {id: 3}，GET api/two 需要這個響應id?inputFromApiOne=3 --> {name: 'SS'}

我在組件中可用的最終響應應該是 -

{
  "id": 3, -- from API One
  "name": "SS" -- from API Two
}

我使用解析器從 API One 獲取數據，但無法將其用作第二個解析器的輸入。

我還嘗試從解析器 1 中的 API 獲取數據。 我使用了 flatMap，但最后我只得到了來自第二個 API 的數據。

resolve(route: ActivatedRouteSnapshot) {
  return this.myService.getDataFromApiOne(route.params.id).pipe(flatMap(data => {
    return this.myService.getDataFromApiTwo(data.someKey.id);
  }));
}

Answer 1

我希望您在路由配置中指定了兩個解析器，例如

 {
    path: '', 
    component: MyComponent,
    resolve: {
      fromResolverOne: Resolver1
      fromResolverTwo: Resolver2
   }
}

然后在你的組件中

const resolverOneData = this.route.snapshot.data['fromResolverOne'];
const resolverTwoData = this.route.snapshot.data['fromResolverTwo'];

Answer 2

我只能通過等待異步來實現這一點。

@Injectable()
export class MyResolverService implements Resolve<any> {

 constructor(private myService: MyService) { }

 async resolve(route: ActivatedRouteSnapshot) {
   const dataFromApiOne = await 
   this.myService.getMediumDetails(route.params.id).toPromise();
   const dataFromApiTwo = await this.myService.getPageConfig(dataFromApiOne.id).toPromise();
   return { dataFromApiOne, dataFromApiTwo };
 }
}

然后在我的組件中，我只是從路由快照中獲取數據。

this.dataFromBothApi = this.route.snapshot.data.myData