在 Angular/rxjs 中使用異步管道時如何傳遞參數？

Question

我正在嘗試在 Angular 中使用聲明性方法，使用async管道OnPush可觀察對象並使用OnPush更改檢測。

我有第二個 observable，它可能會或可能不會被調用，並且需要來自第一個 observable 的數據才能完成。

訂單.component.html

<div *ngIf="order$ | async as order">
    <h3> Order {{ order.id }} </h3>
    ....
     
    <app-returns *ngIf="order.status === 'Returned'"
        [rma]="rma$ | async" >
    </app-returns>

</div>

訂單.component.ts

order$: Observable<Order> = this.route.paramMap.pipe(
   map((params: ParmaMap) => +params.get('id')),
   switchMap((id: number) => 
       this.orderSvc.get(id)
));

rma$: Observable<Rma> = this.order$.pipe(
    switchMap((order: Order) => 
        this.rmaSvc.get(order.rma.id)
));

這種方法的問題在於訂單服務對 API 進行了兩次調用以完成此操作。

當模板中需要多個 observable 時，我通常會使用forkJoin或combineLatest來組合它們。 但在這種情況下，我只想在必要時調用 rma 服務。

其他更幼稚的方法（同時很好地說明了問題）會產生有趣的結果。 你能說429嗎？

 <app-returns *ngIf="order.status === 'Returned'"
    [rma]="rma$(order.rma.id) | async" >
 </app-returns>

打字稿

rma$(id: number): Observable<Rma> {
    return this.rmaSvc.get(id);
}

使用異步管道時如何傳遞參數？

Answer 1

您可以使用shareReplay將可觀察的訂單更改為緩存：

order$: Observable<Order> = this.route.paramMap.pipe(
   map((params: ParmaMap) => +params.get('id')),
   switchMap((id: number) => 
       this.orderSvc.get(id)
   ),
   shareReplay(1)
);

然后創建

rma$: Observable<Rma> = order$.pipe(
  switchMap((order: Order) => 
    this.rmaSvc.get(order.rma.id)
)