0

在过去的几天里，我一直在学习 observables，并开始在我的 Angular 应用程序中使用它们。我有一个 Web API 应用程序，我正在通过打字稿中的 NSwagClient 生成一个客户端。我有一个以它为签名的 API 操作：

Task<ActionResult<List<Product>>> GetProducts(int skip, int take)

我在 typescript 中的 API 客户端是这样调用的：

_client.GetProductsAsync(0, 10).subscribe(next => {console.log(next)}, err => {}, () => {})

在我看来，当我要求下一次加载产品时（因此，跳过 10 个，取 10 个，然后跳过 20 个，取 10 个），我需要更新初始 _client.GetProductsAsync 调用的参数。但看起来，如果不取消订阅并使用新参数重新订阅可观察对象，我就无法做到这一点。这似乎与我认为可观察对象作为数据流的概念背道而驰，因为可观察对象应该创建一次，然后以某种方式“触发”以获得更多结果并将它们传递给观察者。

如何订阅一次 API 客户端并完成此操作？

4

3 回答 3

1

您将需要一个Subject包含当前页面并使用以下类型的 RxJS 运算符之一：concatMap、switchMap或mergeMap.

Subject当一个新值被推到页面上时，页面将触发可观察链。

page$ = new Subject<number>();

在您的 html 模板中，您将需要一些内容来构建您的分页链接/按钮，当您单击它时，它们会在您的页面主题上推送一个新值：

<button (click)="page$.next(pageNum)">{{ pageNum }}</button>

现在，您的数据调用可以利用page$主题来触发来自您的服务器的新请求以获取这些部分结果。当页面更改时，将对您的 API 进行新的调用。

data$ = page$.pipe(
    map(page => (page - 1) * 10), // map to 'skip' value
    switchMap(skip => this.apiService.getProducts(skip, 10))
);
于 2019-04-29T22:22:30.477 回答
1

您没有，每次您检索另一页数据时，您都在发出另一个 http 请求。Http 请求触发一次，然后 observable 完成。

于 2019-04-29T22:14:10.150 回答
0

我已经构建了一个名为 ngx-rxcache 的库，它允许您为 Angular 构建可观察的状态管理。

https://github.com/adriandavidbrand/ngx-rxcache

您可以使用 product$ 可观察变量构建服务

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productCache = this.cache.get<Product[]>({
    id: '[Product] products'
  });

  products$ = this.productCache.value$;

  loading$ = this.productCache.loading$;

  constructor(private http: HttpClient, private cache: RxCacheService) { }

  load(page: number) {
    this.usersCache.load(() => this.http.get<Product[]>(`product/${page}`));
  }
}

然后在您的组件中，您可以保持订阅 products$ observable 并使用 load 方法对其进行更新。

products$ = this.productService.products$;

goto(page: number) {
  this.productService.load(page);
}

你可以在这里阅读我写的一篇文章。

https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

于 2019-04-29T22:39:53.830 回答