在 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)
)