Question

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

ngOnInit(): void {

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

        const page = params['page'];

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


    });
}

现在，我有一个新的要求，即用户还可以通过使用反应形式选择“类别”下拉列表来过滤列表。

使用反应式表单，我可以在此处使用此代码订阅观察者

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组合可观察的查询参数和可观察的表格

1 个答案: