时间戳

首页 > 解决方案 > 如何仅在参数或查询参数的一个键值对更改时触发订阅

angular - 如何仅在参数或查询参数的一个键值对更改时触发订阅

问题描述

我有以下情况，我只想在 url 的参数发生更改或查询参数发生showList更改时触发订阅。查询参数的其余部分page=0&size=5&sort=name,asc仅在重新加载或导航回相同 url 等情况下添加在添加showListqueryParam 后添加，导致订阅被触发两次。

以下方式的路线变化是我点击showList按钮

http://localhost:8080/org/acount/param1/param2?showList=true
http://localhost:8080/org/acount/param1/param2?showList=true&page=0&size=5&sort=name,asc

发生第二次导航是因为当 showList 为 true 时，调用 api 来获取帐户列表，如果 api 返回非空结果，则设置页面、大小和排序。

如果按下隐藏按钮，路线将更改为此

http://localhost:8080/org/acount/param1/param2?showList=false

当按下后退按钮时，我也需要处理像 reload + 这样的情况。

我已经实施了以下方法来处理上述情况，但我知道这不是最好的解决方案：

this.params_subscribe = combineLatest([this.activatedRoute.params, this.activatedRoute.queryParams]).pipe(
      map(results => ({ param: results[0], query: results[1] }))
    ).subscribe(result => {
      let show_list: boolean = (result.query.showList === 'true');
      if ((JSON.stringify(result.param) !== JSON.stringify(this.prevParam)) || (result.query.showList !== this.prevQueryParam.showList)) {
        if (!this.from_ui || result.query.showList !== 'false') {
          if (result.param.teamId && result.param.breadcrumb) {
            ...
          }
          else {
            this.initialize()
          }
        }
      }
      this.prevParam = result.param;
      this.prevQueryParam = result.query;
    });

from_uishowList如果通过单击设置为 false的 hideList 按钮更改了查询参数，则用于防止函数调用。

有没有更好的方法来处理这个？

标签： angulartypescript

解决方案

您可以将distinceUntilChanged运算符与自定义比较器一起使用。

尝试以下

combineLatest([
  this.activatedRoute.params, 
  this.activatedRoute.queryParams
]).pipe(
  map(results => ({ param: results[0], query: results[1] })),
  distinctUntilChanged((prev, curr) =>
    JSON.stringify(prev.result.param) === JSON.stringify(curr.result.param) &&
    prev.result.query.showList === curr.result.query.showList
  )
).subscribe(
  ...
);

推荐阅读