时间戳

首页 > 解决方案 > 如何从 Angular 应用组件中的 ActivatedRoute 快照获取查询参数？

angular - 如何从 Angular 应用组件中的 ActivatedRoute 快照获取查询参数？

问题描述

我想在我的app.component同步中获取一个查询参数，而不是使用ActivatedRoute's queryParamMapobservable。出于这个原因，我使用路由快照如下：

const param = this.route.snapshot.queryParamMap.get('param');

这适用于子组件，但似乎不适用于app.component. 这是一个StackBlitz。

是什么原因以及如何达到预期的结果？

标签： angularroutessnapshotquery-parameters

解决方案

问题是您正在访问路线的快照。在应用程序组件通过初始化阶段运行时，它为空。

如果您的子组件被创建，而路由已经发生，则快照可能会在导航后为您提供正确的 queryParam。但是，例如，如果您在深度链接中并且尝试刷新页面，那么即使在您的子组件中，快照也可能为空。

要访问 routeParam，您需要实际订阅 queryParamMap 或 queryParams。就像是：

this.route.queryParamMap.pipe(map((paramMap: ParamMap) => {
      return paramMap.get('param');
    }), distinctUntilChanged()).subscribe(val => {
      this.param = val;
      // having changedetection.onPush activated you would need to call the 
      // cdR.markAsChecked() here
    })

也许这会有所帮助：Angular Router: Understanding Router State

推荐阅读