Activated Route.queryParams 在 Angular 5 中的屏幕刷新后未定义

Question

请帮忙！

所以我有以下网址

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

当我导航到它时，我编写了以下代码：

this.route.queryParams.subscribe((res: any) => {
console.log('tj: ' + res.tj)
console.log('bd: ' + res.bd)

现在这打印了我期望的，即 tj：3 和 bd：7

但是当我刷新屏幕时，这个 res.tj 和 res.bd 是不确定的。 这怎么可能？

最初发生这种情况是因为我注意到刷新屏幕时的 url 已更改为：

https://xxx.io/#/route1/yyyyyyyy%3D3&bd%3D7

但这是由于 url 编码问题，所以我添加了一个 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, "=");
}
}

这解决了这个问题，因此刷新后 url 再次正确：

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

但 res.tj 和 ts.bd 仍未确定!!

已经坚持了几个小时，所以希望有人能阐明为什么会发生这种情况以及我该如何解决它？

谢谢！

Answer 1

Angular NavigationExtras 接口有一个属性preserveQueryParams，将其设置为true可能对您的情况有所帮助

典型用法：

this.router.navigate(['/view'], { preserveQueryParams: true });