ngOnDestroy 中的 RxJS“取消订阅”方法没有足够快地处理资源

Question

我正在调查一个问题，该问题似乎源于“订阅”类的“取消订阅”方法似乎没有足够快地处理资源，从而导致内存泄漏。

这是我的场景：

我有 2 个组件 - LandingPageComponent (LPC) 和 WebPlayerComponent (WPC)。 LPC 是用户在访问站点时看到的第一页。在该页面上，他们有一个链接将他们带到第二页或 WPC（传递一个参数，例如“Operator Benchmarking”）用户通过单击浏览器的后退按钮返回上一页。这会触发 WPC 的 ngOnDestroy 方法处理订阅（参见下面的代码）。

WebPlayer组件

export class WebPlayerComponent implements OnInit, OnDestroy {
    @Input() workbookId: string;
    @Input() workbookPage: string | number;

    private _workbooks: Workbook[];
    private _filters: Filter[];

    private _subscriptions: { [key: string]: Subscription } = {};
    
    ngOnInit() {
        this._subscriptions["combined"] = combineLatest(
            this.workbookService.workbooks$,
            this.filterService.filters$,
            this.libraryService.userFolderInitialised$
        ).subscribe(([workbooks, filters, userFolderInitialised]) => {
            this._workbooks = workbooks;
            this._filters = filters;

            this._subscriptions["webPlayerServiceSubscription"] = this.webPlayerService.openWorkbook(workbook.libraryPath, parameterString).subscribe(
                    (webPlayer) => {
                        console.log("_subscriptions before 'openWorkbook call'");
                        Object.keys(this._subscriptions).map((key) => {
                        console.log(key);
                        });

                        console.log("Openning document page: " + this.workbookPage);
                        webPlayer.openDocument("spotfire-container", this.workbookPage);
                    });
        });

    }
    
    ngOnDestroy() {
        Object.keys(this._subscriptions).map((key) => {
            this._subscriptions[key].unsubscribe();
            console.log("---Unsubscribed " + key + "---");
        });
    }
}

如果用户单击浏览器的后退按钮并足够快地单击“链接”（在我的示例中不到 5 秒），就会出现问题。应该被处理的订阅不是并且仍然是活动的。我可以通过查看控制台的输出来确认：

在上图中，您可以看到再次从 LandingPageComponent 中单击“链接”后，我们看到了 2 组调用（绿色数字 (1) 和 (2)），我们还查看“打开文档页面：” 3 次

如果我在再次单击链接之前等待 5 秒，输出应该是这样的

我不确定为什么我的订阅资源处理得不够快（至少我认为这是问题所在）。

注意：我使用的是 RxJS 6.4.0 和 Angular 8.1.3

Answer 1

您可以使用switchMap 喜欢：

ngOnInit() {
    this._subscriptions["combined"] = combineLatest(
            this.workbookService.workbooks$,
            this.filterService.filters$,
            this.libraryService.userFolderInitialised$
    )
    .pipe(
        switchMap(([workbooks, filters, userFolderInitialised]) => {
            this._workbooks = workbooks;
            this._filters = filters;

            return this.webPlayerService.openWorkbook(workbook.libraryPath, parameterString)
        })
    )
    .subscribe((webPlayer) => {
        webPlayer.openDocument("spotfire-container", this.workbookPage);
     });
    }

因此，您将 observable 从 combineLatest 更改为 openWorkbook