时间戳

首页 > 解决方案 > 如何声明带参数的 GET 调用？

angular - 如何声明带参数的 GET 调用？

问题描述

从 API 获取数据的一种技术是在服务中像这样声明它：

getItems$ = this.httpClient.get<Item[]>(this.url);

然后订阅它或在消费组件中使用异步。

如果 get 调用需要像 get by id 这样的参数，你会怎么做？

编辑：以上是使用 RxJS 流的声明性方法的示例。是getItems$一个属性。

所以问题是，当使用声明性方法和定义流的属性而不是调用getItems(itemId)方法时，如何传入参数？

标签： angularrxjsangular-httpclientrxjs-observables

解决方案

要处理任何“参数”，您可以使用 Subject 或 BehaviorSubject 创建另一个动作流。然后将“参数”发射到流中。

这是我的一个应用程序的示例。

  // Handle product selection action
  private productSelectedSubject = new BehaviorSubject<number>(0);
  productSelectedAction$ = this.productSelectedSubject.asObservable();

  product$ = this.productSelectedAction$
    .pipe(
      filter(id => !!id),
      switchMap(selectedProductId =>
        this.http.get<Product>(`${this.productsUrl}/${selectedProductId}`)
      ));

  // Selected product was changed
  changeSelectedProduct(selectedProductId: number): void {
    this.productSelectedSubject.next(selectedProductId);
  }

这里我们创建了一个初始值为 0 的 BehaviorSubject。（您可以使用没有初始值的 Subject。）

当用户选择一个产品（或者确定具体的产品）时，该产品的 id 被发送到productSelectedSubject

然后，此代码使用管道在每次将新产品 ID 发送到流中时做出反应。管道中的第一个运算符过滤掉任何无效的 Id。然后 switchMap 使用发出的产品 ID 来发出 http get。

我有一个完整的例子，它还在这里为分页设置了额外的“参数”：https ://github.com/DeborahK/Angular-ActionStreams

推荐阅读