如何使用 Angular 和 RXJS 组合查询参数 observable 和表单 observable

Question

我有一个带有分页的 Post 列表，我订阅了查询参数 ?page= 以调用服务 API

ngOnInit(): void {

    this.route.queryParams.subscribe(params => {

        const page = params['page'];

        // on query parameter change, call the API service here


    });
}

现在，我有一个新要求，用户还可以通过使用 Reactive Form 选择类别下拉列表来过滤列表。

使用 Reactive Form，我可以在这里使用此代码订阅观察者

onChanges(): void {
  this.myForm.get('category').valueChanges.subscribe(val => {
    // on form value change, call the API service here
  });
}

我的问题是，如何使用 Angular 和 RXJS 来简化它？

上面示例中的方法并不是真正的 DRY，因为调用的是相同的 API，只是请求参数不同

谢谢。

Answer 1

您可以使用 combineLatest 运算符：

ngOnInit(): void {
  combineLatest(
    this.route.queryParams, 
    this.myForm.get('category').valueChanges
  ).subscribe(([{ page }, category]) => {
     // on any change call the API service here
  });
}

旁注：不要忘记在 onDestroy 挂钩中退订，或使用 takeUntil 运算符

如何使用 Angular 和 RXJS 组合查询参数 observable 和表单 observable

How to combine query parameter observable and form observable using Angular and RXJS

angular

rxjs5

rxjs-pipeable-operators