Angular初始化时如何在根服务中添加/修改URL查询参数？

问题背景 #

我需要在根/单例服务中更新URL的查询参数，该服务的职责是通过URL保存共享状态以实现深度链接。但遇到了两个关键问题：

• ActivatedRoute无法正常工作，因为服务未绑定到路由，始终返回"/"
• 在服务构造阶段调用router.url同样只返回"/"

当前的不规范实现 #

我找到了一种可行但写法很不规范的实现方式：

@Injectable({
  providedIn: 'root',
})
export class MyService implements OnDestroy {

(...)

private updateUrlOnDataChange() {
    this.dataChanges.pipe(untilDestroyed(this)).subscribe((data) => {
      const segments = this.router.parseUrl(this.location.path()).root.children['primary']
        ?.segments;
      const pathFragments = (segments || []).map((segment) => segment.path);
      const params = this.router.parseUrl(this.location.path()).queryParams;
      params['data'] = JSON.stringify(data);
      this.router.navigate(pathFragments, {
        queryParams: params,
      });
    });
  }

}

期望的简洁实现 #

我更希望用更简洁的方式实现，但这种写法仅在绑定到叶子路由段的组件中有效，在单例服务里无法正常运行：

this.router.navigate([], {
  queryParams: params,
  queryParamsHandling: 'merge'
});

问题根源补充 #

后续发现这是Angular的已知问题，核心矛盾点在于：

• 当应用（包括Router）完全初始化后，更新查询参数的方案可以正常生效
• 但如果是通过粘贴深度链接触发内部状态更新，进而再更新URL参数时，此时Router/ActivatedRoute还未用浏览器的实际URL完成初始化，仍然只返回"/"且无查询参数

最终解决方案 #

针对根服务构造函数中Router未初始化就尝试更新参数的场景，我在QueryParamsService中新增了一个可观察对象，供其他服务判断Router是否完成初始化：

export class QueryParamsService {
  public initialized$: Observable<void>;
  private readonly initializedSubject: ReplaySubject<void> = new ReplaySubject<void>(1);
  private routerInitialized = false;

  constructor(private readonly router: Router, private readonly route: ActivatedRoute) {
    this.initialized$ = this.initializedSubject.asObservable();
    this.router.events
      .pipe(
        filter((event: RouterEvent) => !!event && event instanceof NavigationEnd),
        take(1)
      )
      .subscribe(() => {
        this.routerInitialized = true;
        this.initializedSubject.next(undefined);
      });
  }

(...)

同时，我通过this.routerInitialized标记，在Router初始化完成前尝试修改查询参数时抛出错误，避免无效操作。

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