为什么Angular Router两次收到查询参数？

Question

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

!!!我需要查询参数来过滤项目！！！>

所以，我的问题是，当我从列表页B导航到包含项目ID和作为查询参数的子项目ID的详细信息页面时，一切正常。但是，如果我随后导航到列表A并导航至详细的项目，则查询参数的订阅首先接收no

查询参数，因为在页面A上将不设置查询参数，然后订阅接收old从列表页面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: "";
  });
}

我有一个应用程序，其中包含两个带有列表的页面。在列表页面A上，我可以单击一个项目，它将显示该项目的详细信息页面。在此详细信息页面上，我有一个带有子项目的列表，如果单击...

Answer 1

如果您忘记退订查询参数订阅，则可能会发生此现象。尝试取消订阅ngOnDestory上的订阅。