Angular 组件在被销毁后仍在监听订阅 [重复]

Question

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 来验证当我导航时组件破坏正在发生并且确实发生了。因此，从我的角度来看，我被破坏的组件似乎仍然处于活动状态并正在侦听订阅事件。 this.globalVarsService.selectedDepartment$ 上也没有可用的 unsubscribe 方法，所以我也不能将它放入我的 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();
}