为什么 queryParams 为空

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 可测试通过folowwing网址：https://angular-2tuafn.stackblitz.io?test=123

但结果，queryParam "test" 为空，而 queryParamMap 为空，请参阅控制台输出：

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

=> 为什么 queryParamMap 是空的？？？

然后，我尝试使用 Observable 模式：

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

查看Stackblitz演示：https://stackblitz.com/edit/angular-hfqx8a 可测试通过folowwing网址：https://angular-hfqx8a.stackblitz.io?test=123

但结果， queryParam "test" 首先为空，然后取正确的值 (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，我明白了我的问题。=> 因为组件是在应用实际路由之前加载的！！！

因此，我更新了我的代码，现在我正确收集了查询参数：

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

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

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