router-outlet未能触发deactivate()导致多个订阅问题

功能描述：在一个弹框明细中，包含和其他内容，弹框时触发this.router.navigate()方法，参数 为([xxxx], { queryParams: param})，param将传给xxx指向的组件，组件根据param查询相关内容并渲染。

问题描述：当xxxx相同，queryParams不同时，点击第二条数据弹框出现了上一条数据弹框的历史内容

调试发现：在xxx指向的组件中， this.route.queryParams的属性observers包含多条，this.route.queryParams.subscribe()时，获取的第一条是上次的点击数据，并且多次的测试情况下程序并没有等到subscribe获取到最新点击的数据，而是获取第一条数据后就直接初始化，查询数据，在查询之后再度执行subscribe，最终导致界面显示的是历史数据内容。

情况分析：弹框情况下，无法点击其他路由，导致无法触发deactivate(), 从而导致由于每点击一次都会多出一条observer

解决方法：在xxx指向的组件销毁时取消订阅，再次进入时就只剩一条observer

代码：

  private sub: Subscription;
  constructor(private route: ActivatedRoute) {
    this.sub = this.route.queryParams.subscribe(res => {
      this.id = res.id;
    })
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }