Tengo un requisito en el que, una vez que recibo una respuesta de mi primera llamada a la API, necesito hacer 2 llamadas a la API (pueden ser en paralelo). Una vez que se obtiene toda la respuesta de la llamada a la API, necesito enviar los observables (obs2$ y obs3$) al subcomponente.
El código es algo como:
ngOnInit(): void { this.obs1$ = this.getData1(); this.obs2$ = this.obs1$.pipe( concatMap(() => { return this.getData2(); }) ); this.obs3$ = this.obs1$.pipe( concatMap(() => { return this.getData3(); }) ); } private getData1(): Observable<string> { return this.service.getData1<string>('/api/get_1').pipe( tap((response: string) => { this.id = response }) ); } private getData2(): Observable<string> { return this.service.getData2<string>('/api/get_2/id='+this.id).pipe( tap((response: string) => { ... this.flag2 = true; }) ); } private getData3(): Observable<string> { return this.service.getData3<string>('/api/get_3/id='+this.id).pipe( tap((response: string) => { ... this.flag3 = true; }) ); }Mi .html es así:
<ng-container *ngIf="(data2: obs2$ | async, data3: obs3$ | async) as data; else loading"> <ng-container *ngIf="flag2 && flag3; else loading"> <sub-component [data2]="data.data2" [data3]="data.data3" > <sub-component> </ng-container> </ng-container> <ng-template #loading> Loading... </ng-template>El problema es que la llamada API de getData1 se llama 2 veces. ¿Hay alguna manera de tenerlo en single? Además, si puedo hacerlo sin usar las banderas (bandera 2 y bandera 3). Nota: Probé esto, pero no funcionó:
ngOnInit(): void { this.obs1$ = this.getData1(); this.obs1$.pipe(first()).subscribe(() => { this.obs2$ = this.getData2(); this.obs3$ = this.getData3(); }); }Ya casi estás ahí. En lugar de activar llamadas individuales para data2 y data3 , podría usar la función forkJoin de forkJoin para activar múltiples observables en paralelo.
También puede omitir las variables id , flag2 y flag3 esta manera.
Prueba lo siguiente
ngOnInit(): void { this.obs$ = this.getData1().pipe( switchMap((id: string) => forkJoin({ data2: this.getData2(id), data3: this.getData3(id) })) ); } private getData1(): Observable<string> { return this.service.getData1<string>('/api/get_1'); } private getData2(id: string): Observable<string> { return this.service.getData2<string>('/api/get_2/id=' + id); } private getData3(id: string): Observable<string> { return this.service.getData3<string>('/api/get_3/id=' + id); } <ng-container *ngIf="(obs$ | async) as data; else loading"> <sub-component [data2]="data.data2" [data3]="data.data3" > <sub-component> </ng-container> <ng-template #loading> Loading... </ng-template>Si necesita llamar a obs2$ y obs3$ en paralelo con una solicitud HTTP para obs1$ , puede lograrlo agregando el operador shareReplay a obs1$ .
Pruébalo como el siguiente:
ngOnInit(): void { this.obs1$ = this.getData1().pipe(shareReplay(1)); this.obs2$ = this.obs1$.pipe(switchMap((id) => this.getData2(id))); this.obs3$ = this.obs1$.pipe(switchMap((id) => this.getData3(id))); } private getData1(): Observable<string> { return this.service.getData1<string>('/api/get_1'); } private getData2(id: string): Observable<string> { return this.service.getData2<string>('/api/get_2/id=' + id); } private getData3(id: string): Observable<string> { return this.service.getData3<string>('/api/get_3/id=' + id); }Luego, con respecto a las banderas, puede probar lo siguiente dentro de la plantilla:
<ng-container *ngIf="{ data2: obs2$ | async, data3: obs3$ | async } as data; else loading"> <ng-container *ngIf="data.data2 && data.data3; else loading"> <sub-component [data2]="data.data2" [data3]="data.data3"></sub-component> </ng-container> </ng-container> <ng-template #loading> Loading... </ng-template>