Angular 组件在被销毁后仍在监听订阅

Question

这个问题在这里已经有了答案:





Angular/RxJS When should I unsubscribe from `Subscription`

(26 个回答)


3年前关闭。




Angular 5

我遇到的问题是，当我离开某个组件时，该组件仍在监听服务订阅更新并对其采取行动。

我的服务

export class GlobalVarsService {
  private selectedDepartment = new BehaviorSubject<number>(null);
  selectedDepartment$ = this.selectedDepartment.asObservable();

...
}

我的组件

ngOnInit() {
     this.globalVarsService.selectedDepartment$.subscribe( selectDepartment => {
        this.refreshReportData();
    });
}

我可能距离 MyComponent 有 3 次点击但如果我更新 selectedDepartment那么订阅仍然会触发和 this.refreshReportData将执行。显然我不想要这个，因为它是完全不必要的额外 HTTP 调用。

我试过实现 onDestroy验证组件销毁是否在我导航时发生并且确实发生了。所以从我的 Angular 来看，我销毁的组件似乎仍然处于事件状态并监听订阅事件。也没有 unsubscribe方法可在 this.globalVarsService.selectedDepartment$ 上获得所以我不能把它放进我的 onDestroy方法。

我该怎么办？

Answer 1

是的，你必须在 ngOnDestroy 中取消订阅，但如果你使用 Async Pipe，它会自动处理

import { Subscription } from "rxjs/Subscription";
private subscription: Subscription ;
ngOnInit() {
 this.subscription = this.globalVarsService.selectedDepartment$.subscribe( selectDepartment => {
    this.refreshReportData();
});
}

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