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

最新推荐文章于 2023-09-07 01:35:33 发布

原创最新推荐文章于 2023-09-07 01:35:33 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #typescript

工作问题记录专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在一个弹框中通过`router.navigate()`传递查询参数导致组件内容显示历史数据的问题。关键在于组件销毁时未正确取消`queryParams`的订阅，解决方法是在`ngOnDestroy`中取消订阅。通过实例代码展示了如何确保每次路由更新时只有一条observer，从而避免显示错误内容。

功能描述：在一个弹框明细中，包含<router-outlet>和其他内容，弹框时触发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();
  }