Help needed!
I'm facing a dilemma with the url below
https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7
After navigating to it, I utilize this code:
this.route.queryParams.subscribe((res: any) => {
console.log('tj: ' + res.tj)
console.log('bd: ' + res.bd)
The expected output is tj: 3 and bd: 7. However, upon refreshing the screen, res.tj and res.bd turn undefined. How could this happen?
Initially, I noticed that upon refresh, the url changes to:
https://xxx.io/#/route1/yyyyyyyy%3D3&bd%3D7
This alteration was due to encoding issues in the url structure, hence I implemented a CustomUrlSerializer:
import { UrlSerializer, UrlTree, DefaultUrlSerializer } from '@angular/router';
export class CustomUrlSerializer implements UrlSerializer {
parse(url: string): UrlTree {
const dus = new DefaultUrlSerializer();
return dus.parse(url);
}
serialize(tree: UrlTree): any {
const dus = new DefaultUrlSerializer();
let path = dus.serialize(tree);
return path.replace("%3F", "?").replace(/%3D/g, "=");
}
}
With this modification, the url returns to its correct form after refreshing:
https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7
However, the issue of res.tj and ts.bd remaining undefined persists! Any insights on why this occurs and how to resolve it would be greatly appreciated.
Thank you!