为什么 queryParams 为空 [英] Why queryParams are empty
问题描述
我目前正在尝试了解如何在 Angular 组件中收集 queryParameters.由于我只想在 init 期间收集它们一次,因此我首先尝试了快照模式:
I'm currently trying to understand how to collect the queryParameters in an Angular component. As I want to only collect them once during the init, I firstly tried the snapshot pattern:
ngOnInit() {
console.log(this.route.snapshot.queryParamMap);
console.log('param test = ' + this.route.snapshot.queryParamMap.get('test'));
}
查看 Stackblitz 上的演示:https://stackblitz.com/edit/angular-2tuafn可通过以下网址进行测试:https://angular-2tuafn.stackblitz.io?test=123一个>
See the demo on Stackblitz: https://stackblitz.com/edit/angular-2tuafn Testable through the folowwing URL: https://angular-2tuafn.stackblitz.io?test=123
但结果,queryParam "test" 为空,queryParamMap 为空,见控制台输出:
But as a result, the queryParam "test" is null and the queryParamMap is empty, see console output:
ParamsAsMap {params: {…}}
keys: Array(0)
params: {}
__proto__: Object
param test = null
=> 为什么queryParamMap 为空???
=> Why does the queryParamMap is empty ???
然后,我尝试使用 Observable 模式:
Then, I tried with the Observable pattern:
ngOnInit() {
this.route.queryParamMap.subscribe(
(params: ParamMap) => {
console.log(params);
console.log('param test = ' + params.get('test'));
}
);
}
在 Stackblitz 上查看演示:https://stackblitz.com/edit/angular-hfqx8a可通过以下网址进行测试:https://angular-hfqx8a.stackblitz.io?test=123一个>
See the demo on Stackblitz: https://stackblitz.com/edit/angular-hfqx8a Testable through the folowwing URL: https://angular-hfqx8a.stackblitz.io?test=123
但结果,queryParam "test" 首先为空,然后取正确的值 (123),请参阅控制台输出:
But as a result, the queryParam "test" is firstly null and then it take the correct value (123), see console output:
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 值?
=> Why there is a first console output empty and then the console output with the correct queryParam value ?
经过几次研究后,我不明白发生了什么:-(
After several researsh I don't reach to understand what's going on :-(
=> 预先感谢您的帮助
=> Thanks in advance for your help
问候
感谢 Dimanoid 和 Pravin Pokharkar,我明白了我的问题.=> 因为组件是在应用实际路由之前加载的!!!
Thanks to Dimanoid and Pravin Pokharkar, I understood my issue. => Because component is loaded before the actual routing applied!!!
因此我更新了我的代码,现在我正确地收集了查询参数:
Thus I have update my code an now I properly collect the queryparams:
this.router.events.subscribe(
(event: RouterEvent) => {
if (event instanceof NavigationEnd) {
this.test = parseInt(
this.activatedRoute.snapshot.queryParamMap.get('test')
);
}
}
);
推荐答案
因为在应用实际路由之前加载组件.将 { enableTracing: true }
添加到 RouterModule
以查看幕后发生的事情.
Because component is loaded before the actual routing applied.
Add { enableTracing: true }
to the RouterModule
to see what is happening behind the scene.
RouterModule.forRoot([], { enableTracing: true })
https://stackblitz.com/edit/angular-boghpy?file=src/app/app.module.ts
这篇关于为什么 queryParams 为空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!