Angular 10+ 如何从非 router-outlet 内的组件获取 URL 查询参数？

• 在与router-outlet同级位置渲染的组件（比如你模板里的<app-header>、<app-footer>），注入的ActivatedRoute是独立的空路由节点实例，不会关联全局URL的查询参数。这类组件通过自身注入的ActivatedRoute读取查询参数时，永远只能拿到null，和实际URL携带的参数无关。

方案1：从全局路由状态读取顶层查询参数 #

放弃依赖组件自身注入的ActivatedRoute，改为注入Router服务，从路由全局状态的根节点位置读取全局定义的查询参数，读取效果和组件在模板中的位置无关。
对应的代码修改：

1. 调整app-footer组件的构造函数依赖

   constructor(
     private router: Router,
     private http: HttpClient
   ) { }
   

2. 新增工具方法遍历路由树取到实际承载查询参数的根节点，替换原来的参数读取逻辑

   private getGlobalQueryParam(paramKey: string): string | null {
     let currentNode = this.router.routerState.root;
     // 沿路由树向下遍历到实际匹配路由的节点
     while (currentNode.firstChild) {
       currentNode = currentNode.firstChild;
     }
     return currentNode.snapshot.queryParamMap.get(paramKey);
   }
   

3. 替换getLoc方法里的参数读取行

   // 原错误读取代码
   // var locStr: string | null = await this.route.snapshot.queryParamMap.get('loc');
   
   // 替换为正确的全局读取代码
   const locStr = this.getGlobalQueryParam('loc');
   

   注：快照读取是同步操作，不需要额外加await等待。

方案2：抽离共享服务统一管理区域设置 #

如果项目内多个组件都需要使用loc参数值，可以将参数解析、本地降级计算的逻辑收敛为全局注入的单例服务，在应用启动阶段完成参数解析和计算，所有需要用到区域值的组件直接从服务获取结果。这种方式可以从根源上规避不同模板位置的组件读路由参数不一致的问题。

• 如果需要响应后续URL查询参数的动态变化，不要使用静态的snapshot读取值，需要订阅对应路由节点的queryParamMap可观察流，实时同步参数变化。
• 不要在和router-outlet同级的组件中，依赖自身注入的ActivatedRoute读取路由参数或查询值，这类组件的路由实例本身不携带匹配的路由信息。

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