Angular中ActivatedRoute订阅相同查询参数不触发的解决方法

问题根源 #

Angular Router默认不会在查询参数与当前完全一致时触发导航行为，所以queryParams的订阅也就不会执行。哪怕主动调用navigate传递相同参数，路由不会更新，订阅自然没反应。

方案一：用queryParamMap结合pairwise监听 #

通过pairwise操作符获取前后两次参数快照，手动控制逻辑执行（哪怕参数相同也能触发）：

import { pairwise } from 'rxjs/operators';

public ngOnInit(): void {
  this.ac.queryParamMap.pipe(pairwise()).subscribe(([prevParams, currParams]) => {
    // 不管参数是否变化，直接执行逻辑
    console.log("params", currParams);
    // 若需判断参数是否真的变更，可在这里对比前后参数
    // if (prevParams.get('from') !== currParams.get('from') || prevParams.get('to') !== currParams.get('to')) { ... }
  });
}

方案二：添加随机占位参数强制触发导航 #

每次调用navigate时额外加一个随机参数（比如时间戳），让路由认为参数有变化，从而触发订阅：

private updateDateQueryParam(): void {
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: {
      to: this.endDate,
      from: this.startDate,
      // 新增随机参数，确保每次导航参数唯一
      t: new Date().getTime()
    },
    queryParamsHandling: ""
  });
}

注：此方案会让URL多一个无用参数，但实现简单直接。

方案三：直接调用逻辑，不依赖路由订阅 #

既然是主动调用updateDateQueryParam更新参数，完全可以在这个方法里直接执行业务逻辑，不用等路由订阅触发：

private updateDateQueryParam(): void {
  // 先执行业务逻辑
  this.handleDateParams(this.startDate, this.endDate);
  
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: {
      to: this.endDate,
      from: this.startDate,
    },
    queryParamsHandling: ""
  });
}

private handleDateParams(from: string, to: string): void {
  console.log("处理日期参数", from, to);
  // 这里写原本在订阅里的逻辑
}

内容的提问来源于stack exchange，提问作者tangel