页面重访时Subscribe触发两次问题排查（Ionic3+RxJS5.4.3）

这问题我太熟了——核心原因是你只清理了轮询的订阅，却没清理组件对服务中pollingDataReceived Subject的订阅，加上Ionic页面导航的特性（组件可能被销毁后重建，而服务是单例），导致旧组件的订阅还挂在Subject上，每次触发next()时就会执行多次回调。

先拆解下问题：

• 服务里的pollingDataReceived是全局单例的Subject，只要有组件订阅过它，除非手动取消订阅，否则这个订阅会一直存在
• 你的组件在ngOnInit里订阅这个Subject，但只在ngOnDestroy里取消了轮询的pollingData订阅，完全没管Subject的订阅
• 当组件被销毁又重建（比如Ionic中返回再进入页面），新组件又会加一个订阅，此时Subject上就有两个订阅者，自然会触发两次回调
• 把轮询移到组件后，Subject（如果改成组件内的）的订阅和轮询订阅都属于组件实例，销毁时一起被清理，所以问题消失

直接修复方案：清理组件对服务Subject的订阅 #

修改你的组件代码，给Subject的订阅也加个引用，在销毁时一起取消：

// my.component.ts
private pollingData: Subscription;
private dataReceivedSub: Subscription; // 新增：保存Subject的订阅引用

someEventHandler() {
  this.pollingData = this.myService.pollForData(this.id);
}
ngOnInit(): void {
  // 保存订阅到变量
  this.dataReceivedSub = this.myService.pollingDataReceived.subscribe((data) => {
    this.analysis = data.analysisData;
    myNavigator.navigateToPageByStatus(myPage);
  }, (err) => {
    console.log(err);
  });
}
ngOnDestroy() {
  console.log('ngOnDestroy: unsubscribe all subscriptions');
  this.pollingData?.unsubscribe();
  this.dataReceivedSub?.unsubscribe(); // 新增：清理Subject的订阅
}

进阶优化：避免重复轮询+自动管理订阅 #

为了更稳妥，还可以优化服务里的轮询逻辑，避免同时存在多个轮询任务，同时推荐用AsyncPipe自动管理订阅（不用手动写unsubscribe）：

1. 优化服务的轮询逻辑

// my-service.service.ts
public pollingDataReceived = new Subject<any>();
private currentPollingSub: Subscription; // 跟踪当前轮询任务

pollForData = (id: string) : Subscription => {
  // 先取消之前的轮询（如果存在），避免多个轮询同时跑
  this.currentPollingSub?.unsubscribe();
  
  let stopPolling = false;
  this.currentPollingSub = Observable.interval(environment['pollingInterval'])
    .takeWhile(() => !stopPolling)
    .concatMap(() => this.getAnalysisById(id))
    .subscribe(
      (analysisData) => {
        if (!analysisData) {
          alert('no analysis data!');
          stopPolling = true;
          return;
        }
        
        if (analysisData.status !== 'questions') {
          stopPolling = true;
          const result = { someData: 'whatever' };
          console.log('raise pollingDataReceived event');
          this.pollingDataReceived.next(result);
        }
      },
      (err) => {
        console.error('Polling failed:', err);
        stopPolling = true;
      },
      () => {
        // 轮询结束后清理订阅
        this.currentPollingSub?.unsubscribe();
      }
    );
  
  return this.currentPollingSub;
}

2. 用AsyncPipe自动管理订阅（更省心）

把组件里的订阅改成Observable，用Ionic支持的AsyncPipe自动处理订阅和清理：

// my.component.ts
private pollingData: Subscription;
public analysis$: Observable<any>; // 改成Observable

someEventHandler() {
  this.pollingData = this.myService.pollForData(this.id);
}
ngOnInit(): void {
  // 直接把服务的Subject赋值给组件的Observable
  this.analysis$ = this.myService.pollingDataReceived.pipe(
    tap(data => {
      // 在这里处理导航逻辑
      myNavigator.navigateToPageByStatus(myPage);
    })
  );
}
ngOnDestroy() {
  console.log('ngOnDestroy: unsubscribe polling task');
  this.pollingData?.unsubscribe();
  // 不用手动清理analysis$的订阅，AsyncPipe会自动处理
}

然后在模板里用AsyncPipe：

<!-- 模板中显示数据 -->
<div *ngIf="analysis$ | async as analysis">
  <!-- 渲染analysis数据 -->
</div>

内容的提问来源于stack exchange，提问作者P.Brian.Mackey