我目前正在尝试了解如何在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”首先为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')
);
}
}
);
因为组件是在应用实际路由之前加载的。添加{ enableTracing: true }
到RouterModule
以查看幕后发生的事情。
RouterModule.forRoot([], { enableTracing: true })
https://stackblitz.com/edit/angular-boghpy?file=src/app/app.module.ts
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句