angular - 如何使用 Angular 和 RXJS 组合查询参数 observable 和 form observable

Question

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

ngOnInit(): void {

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

        const page = params['page'];

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


    });
}

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

使用 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操作符