Question

我目前正在尝试了解如何在Angular组件中收集queryParameters。由于我只希望在初始化期间收集一次，因此我首先尝试了快照模式：

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
    console.log('param test = ' + this.route.snapshot.queryParamMap.get('test'));
}

请参阅Stackblitz上的演示：https://stackblitz.com/edit/angular-2tuafn 可通过以下URL测试：https://angular-2tuafn.stackblitz.io?test=123

但是结果，queryParam“ test”为空，而queryParamMap为空，请参见控制台输出：

ParamsAsMap {params: {…}}
    keys: Array(0)
    params: {}
    __proto__: Object
param test = null

=>为什么queryParamMap为空???

然后，我尝试使用可观察模式：

ngOnInit() {
    this.route.queryParamMap.subscribe(
      (params: ParamMap) => {
        console.log(params);
        console.log('param test = ' + params.get('test'));
      }
    );
}

请参阅Stackblitz上的演示：https://stackblitz.com/edit/angular-hfqx8a 可通过以下URL测试：https://angular-hfqx8a.stackblitz.io?test=123

但是，结果，queryParam“ test”首先为null，然后采用正确的值（123），请参见控制台输出：

ParamsAsMap {params: {…}}
    keys: Array(0)
    params: {}
    __proto__: Object
param test = null
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ParamsAsMap {params: {…}}
    keys: Array(1)
    params: {test: "123"}
    __proto__: Object
param test = 123

=>为什么第一个控制台输出为空，然后控制台输出具有正确的queryParam值？

经过几次重新学习后，我无法理解正在发生的事情：-（

=>预先感谢您的帮助

致谢

编辑：

感谢Dimanoid和Pravin Pokharkar，我理解了我的问题。 =>因为组件是在应用实际路由之前加载的！！

因此，我已经更新了代码，现在可以正确地收集queryparams了：

this.router.events.subscribe(
  (event: RouterEvent) => {
    if (event instanceof NavigationEnd) {
        this.test = parseInt(
              this.activatedRoute.snapshot.queryParamMap.get('test')
        );
    }
  }
);

Answer 1

因为在应用实际工艺路线之前已加载组件。将{ enableTracing: true }添加到RouterModule，以查看幕后发生的事情。

RouterModule.forRoot([], { enableTracing: true })

https://stackblitz.com/edit/angular-boghpy?file=src/app/app.module.ts

Answer 2

ngOnInit在Angular首先显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。
您所做的所有路由活动仅在初始化之后进行。因此，在初始阶段，您的路由器内部没有任何东西（空），但是一旦路由到某个东西，您便会获得价值。
有关更多信息，请浏览角度here

的生命周期挂钩

Answer 3

我正在使用 javascript，它运行良好：

var action = new URLSearchParams(window.location.search).get('action');

为什么queryParams为空

3 个答案: