1

请帮忙！

所以我有以下网址

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 仍然是未定义的！！！

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

谢谢！

4

1 回答 1

0

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

典型用法：

this.router.navigate(['/view'], { preserveQueryParams: true });
于 2018-10-19T15:07:18.473 回答