如何使用 Angular 和 RXJS 组合查询参数 observable 和 form observable答案

【问题标题】：How to combine query parameter observable and form observable using Angular and RXJS如何使用 Angular 和 RXJS 组合查询参数 observable 和 form observable
【发布时间】：2019-03-09 12:19:17
【问题描述】：

我有一个带有分页的帖子列表，我订阅了查询参数?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，只是请求参数不同

谢谢。

【问题讨论】：

标签： angular rxjs5 rxjs-pipeable-operators

【解决方案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 运算符

【讨论】：

感谢您的回答为我指明了理解 RXJS 的正确方向