如何在 Angular/rxjs 中使用异步管道传递参数？

Question

我正在尝试在 Angular 中使用声明式方法，使用 async 管道展开可观察对象并使用 OnPush 变化检测。

我有第二个 observable，它可能会被调用，也可能不会被调用，并且需要来自第一个 observable 的数据才能完成。

order.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>

order.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)
);

然后使用 switchMap

创建你的 rma observable

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

如何在 Angular/rxjs 中使用异步管道传递参数？

How to pass parameters while using the async pipe in Angular/rxjs?

rxjs

typescript

angular