页面刷新移除queryParams Angular Router

Question

我使用路由 myApp/contact 访问 angular 组件，其中包含一些查询参数

<div routerLink="../contact" [queryParams]="{ filter: 'myFilter' }"> </div>

查询参数保存在路由器状态（RouterStateSerializer 的实现）中，因此我可以从我的组件访问它们，然后显示它们。当我在组件中导航时，url 现在是 myApp/contact?filter=myFilter，这很好。

如果我刷新页面，url 现在 myApp/contact 没有 queryParams 但我仍然可以看到它们显示在页面上。
如果我现在第二次刷新页面，url 又是 myApp/contact 但现在 queryParams 在页面上显示时为空（这是合乎逻辑的，因为它们不在url 了）

我注意到，当导航到 myApp/contact 的路由时，会在 @ngrx/router-store/navigated 之后直接发出另一个路由请求（请参阅下面捕获的第二个请求）。 我不知道这第二个导航请求是从哪里来的，但是在这一次期间，queryParams 似乎丢失了。

问题是，为什么刷新页面时我的queryParams消失了？这是某处配置的原因吗？为什么有两个导航请求？

这些“2 次导航请求”仅在我刷新此组件页面时发生 => none 我的其他页面有此行为（我怀疑这是因为此页面上有 queryParams）

我还有另一个 Angular 应用程序，它在某些页面上有一些 queryParams，当我刷新页面时我没有相同的行为 => queryParams 留在 url，没有不管我刷新页面的次数

Answer 1

我没有得到这种行为，我猜你在组件中做了一些奇怪的事情。使用 ActivatedRoute 服务访问组件中的查询参数（以连接到 /component 路径的为准）。

  filter = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.filter = this.route.snapshot.queryParams['filter'];
  }

Answer 2

默认情况下，查询参数会在后续导航请求中丢失。将 queryParamsHandling 设置为 preserve 以保留它们

<div routerLink="../contact" [queryParams]="{ filter: 'myFilter' }" queryParamsHandling="preserve"> </div>

Answer 3

我终于找到发生了什么事了。第二个导航来自我的cookie管理（CookieComponent）

ngAfterViewInit(): void {
    this.router.navigate([{ outlets: { popup: isDisplayed ? 'cookie' : null } }]);
}

我真的不明白为什么只有当页面上有 queryParams 时才会出现第二次导航。但是如下重构这段代码解决了我的问题

ngAfterViewInit(): void {
    if (display) {
      this.router.navigate([{ outlets: { popup: 'cookie' } }]);
    }
}

因此，如果您的 queryParams 在页面上有奇怪的行为，请首先检查您的应用程序是否有一些 this.router.navigate 可能在页面重新加载期间被调用！

页面刷新移除queryParams Angular Router

Page refresh removes queryParams Angular Router

angular

angular-router

query-parameters