时间戳

首页 > 解决方案 > 为什么 Angular 路由器会收到两次查询参数？

html - 为什么 Angular 路由器会收到两次查询参数？

问题描述

我有一个应用程序，它有两个带有列表的页面。在列表页面 AI 可以点击一个项目，它会显示该项目的详细信息页面。在此详细信息页面上，我有一个包含子项的列表，如果单击其中一个子项，我将导航到列表页面 B，其中包含子项 ID 的查询参数。列表页面 B 是页面 A 的项目的所有子项目的摘要。我还可以使用项目的路由器参数和子项目的查询参数从列表页面 B 导航到列表页面 A 的详细信息页面.

！！！我需要用于过滤项目的查询参数！！！

所以我的问题是，当我从列表页面 B 导航到使用项目 ID 和子项目 ID 作为查询参数的详细信息页面时，一切正常。但是，如果我然后导航到列表页面 A 并导航到项目详细信息，则查询参数的订阅首先不会收到查询参数，因为在页面 A 上不会设置查询参数，然后订阅会从列表中的旧导航中接收旧查询参数B 页。

我怎么解决这个问题？

PS：我知道我可以编写带有标志的解决方法，但这不是一个好的解决方案。

编辑：

从列表页面 B 链接到详细信息页面：

<a [routerLink]="['/detail-page', item.id]" [queryParams]="{sub_item: sub_item.id}" queryParamsHandling="merge">{{item.id}}</a>

从列表页面 A 链接到详细信息页面：

<a [routerLink]="['/detail-page', item.id]">{{item.id}}</a>

从详细信息页面链接到列表页面 B：

<a [routerLink]="['/page-b']" [queryParams]="{sub_item: sub_item.id}">{{sub_item.id}}</a>

QueryParams-详细页面上的订阅（此订阅接收查询参数两次）：

ngOnInit() {
  this.route.queryParams.subscribe((data) => {
    this.subItemId = data.sub_item ? data.sub_item: "";
  });
}

标签： htmlangulartypescriptangular-router

解决方案

如果您忘记取消订阅查询参数订阅，则可能会发生此行为。尝试在 ngOnDestory 上取消订阅。

在 Component.ts 中：

routeSubscription: any;
ngOnInit() {
  this.routeSubscription = this.route.queryParams.subscribe((data) => {
    this.subItemId = data.sub_item ? data.sub_item: "";
  });
}

ngOnDestroy() {
  this.routeSubscription.unsubscribe();
}

推荐阅读