Question

我想在我的app.component中同步获取一个查询参数，而不是使用ActivatedRoute的{{1}}来观察。因此，我使用路由快照如下：

queryParamMap

这适用于子组件，但似乎不适用于const param = this.route.snapshot.queryParamMap.get('param');。这是StackBlitz。

原因是什么，我如何达到预期的结果？

Answer 1

问题是您正在访问路由的快照。在应用程序组件运行初始化阶段时为null。

如果创建了子组件，而路由已经进行，则快照在导航后可能会为您提供正确的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

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

1 个答案: