在 Angular 5 中刷新屏幕后，ActivatedRoute.queryParams 未定义答案

【问题标题】：ActivatedRoute.queryParams is undefined after screen refresh in Angular 5在 Angular 5 中刷新屏幕后，ActivatedRoute.queryParams 未定义
【发布时间】：2018-10-18 19:45:40
【问题描述】：

请帮忙！

所以我有以下网址

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 还没有定义！！！

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

谢谢！

【问题讨论】：

如何更改网址？由Routernavigate?
是的，然后将查询参数作为导航附加项传递...
可能是一个愚蠢的问题（对 Angular 的路由不是很熟悉），但是 URL 的 #/anchor 部分来自哪里？将查询参数放在 URL 中的主题标签之后对我来说似乎很奇怪。您能否发布一个示例，说明您如何生成这些 URL，以及您的路由是如何定义的？
# 之所以存在，是因为我使用了 HashLocationStrategy。不要认为这是问题所在，因为当我第一次导航到该 url 时路由成功地具有查询参数，但是在刷新时它是未定义的......
您可以提供调用navigate时的代码示例吗？

标签： angular typescript angular-routing angular-router angular-activatedroute

【解决方案1】：

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

典型用法：

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

【讨论】：