現在、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" は null になり、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以下の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 のおかげで、私は自分の問題を理解しました。 => 実際のルーティングが適用される前にコンポーネントがロードされるためです!!!
したがって、コードを更新し、クエリパラメータを適切に収集できるようになりました。
this.router.events.subscribe(
(event: RouterEvent) => {
if (event instanceof NavigationEnd) {
this.test = parseInt(
this.activatedRoute.snapshot.queryParamMap.get('test')
);
}
}
);
ベストアンサー1
実際のルーティングが適用される前にコンポーネントがロードされるため、舞台裏で何が起こっているかを確認するに{ enableTracing: true }は、を追加します。RouterModule
RouterModule.forRoot([], { enableTracing: true })
https://stackblitz.com/edit/angular-boghpy?file=src/app/app.module.ts