Question

请帮助！

所以我有以下网址

Magic

当我导航到它时，我有以下代码：

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

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

但是当我刷新屏幕时，此res.tj和res.bd是未定义的。怎么会这样？

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

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

但这是由于url编码问题所致，所以我添加了一个CustomUrlSerializer，如下所示：

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

此问题已解决，因此刷新后该网址再次正确：

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, "=");
  }
}

但是res.tj和ts.bd仍未定义！！

已经在这个问题上停留了几个小时，以希望有人能阐明为什么会发生这种情况以及我该如何解决？

谢谢！

Answer 1

角度NavigationExtras接口具有属性preserveQueryParams，将其设置为true可能对您有帮助

典型用法：

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

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

1 个答案: