ForkJoin observable 在 ngOnDestroy 时不会取消订阅答案

【问题标题】：ForkJoin observable does not unsubscribe when ngOnDestroyForkJoin observable 在 ngOnDestroy 时不会取消订阅
【发布时间】：2018-08-31 02:35:38
【问题描述】：

所以我的应用程序有一个弹出窗口，它有一个 forkjoin observable，如果用户选择了许多项目，它可能需要很长时间才能运行。如果用户在此过程中关闭窗口，则应用程序将处于静止状态，直到 forkjoin 完成执行，并且在我的主应用程序中没有任何工作。我确实使用订阅取消订阅 forkjoin，但它仍然会运行直到完成。这是我的代码：

subscriptions: Subscription[] = [];

ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscriptions.forEach(s => s.unsubscribe());

}

//get all my items
getItems() {

    //set item list to blank
    this.itemList = [];
    let observables = [];
    this.loadItems = true;

    //get sections that user selected
    this.subscriptions.push(
    this.organizationService.GetSelectedSections(this.sectionID, this.culture)
        .subscribe(
        (selectedSections: GetSelectedSections[]) => {
            this.selectedSectionsAll = selectedSections;

            //push all selected sections in observables
            for (let section in selectedSections) {
                observables.push(this.organizationService.GetItemsBySection( selectedSections[section].sectionItemID, this.culture));
            }

            // get all items in sections to display
            if (observables.length != 0) {
                this.subscriptions.push(
                Observable.forkJoin(observables)
                    .subscribe(
                    (result: any) => {                          
                        this.itemList = result;
                    },
                    (error: any) => {
                        this.errorMessage = error
                        this.loadItems = false;

                    },
                    () => {
                        this.loadItems = false;
                    }
                  )
                  );                
        }                
        },
        (error: any) => {
            this.errorMessage = error                                
        },
        () => {                
        }
        )
      );
}

【问题讨论】：

标签： angular reactjs observable fork-join unsubscribe

【解决方案1】：

随着时间的推移，我了解到正确清理 observables 只是一种好习惯。通常，在我的 ngDestroy 中，我有：

ngOnDestroy() {
    this.updateService.clearUpdate(); //this is where I call the next() method 
                                      //on the observable to clear it
    this.subscription.unsubscribe();  //I call this directly on the Subscription object
                                      //To clear obviously unsubscribe
    this.alive = false;               //I use this in the subscribed method in my component
                                      //as a boolean for the rxjs takeWhile() method...
}

我的典型发布/订阅之一

this.updateService.getUpdate()
                  .takeWhile(() => this.alive)
                  .subscribe(message => {...impl...}

我的消息结构总是在组件类的外部并且非常简单

public message = new Subject<any>();
constructor(private zone: NgZone) {
}

sendUpdate(message) {
    this.zone.run(() => {
        this.message.next(message);
    });
}

getUpdate(): Observable<any> {
    this.zone.run(() => {
        this.message.asObservable();
    });
    return this.message.asObservable();
}

clearUpdate() {
    this.zone.run(() => {
        this.message.next();
    });
}

我使事情尽可能简单。我还使用 angular 的 zone() 来确保无论在何种情况下都能更新 UI。希望这会有所帮助..

【讨论】：