Html 为什么角度路由器接收两次查询参数？

我有一个应用程序，其中有两个列表页面。 在列表页面A上，我可以单击某个项目，它将显示该项目的详细信息页面。在此详细信息页面上，我有一个包含子项的列表，如果我单击其中一个子项，我将导航到列表页面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 [routerLink]="['/detail-page', item.id]">{{item.id}}</a>

---

如果忘记取消订阅查询参数订阅，则可能会发生此行为。尝试取消订阅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();
}

---

也许分享一些代码会有帮助？我已经为你的回复添加了我的路由器链接和查询参数subscriptionTX，但我已经尝试过了，没有解决我的问题

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

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

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