如何将订阅逻辑从 ngOnInit 移动到 ngOnChange

问题描述

这是一个关于 Angular 的更一般的问题 - 我很陌生 - 作为一个 React 书呆子。

我有一项任务是将逻辑移动到 ngOnChanges，涵盖我们应该订阅、保留现有订阅或取消订阅的每种情况。我该怎么做？

这是一些示例代码：

ngOnInit() {

    const obsValue$ = combineLatest([
        this.store.pipe(select(this.example1Selector.getData())),this.store.pipe(select(this.example2Selector.getData()))
    ]).pipe(
        tap(([important1,important2]) => {
            this.important1 = important1;
            this.important2 = important2;
        })
    );
}

我想将此代码移动到 ngOnChange 并仅在需要时订阅并在必要时保留它并在必要时取消订阅。我该怎么做？

解决方法

您应该取消订阅您不再需要的订阅，方法是调用 Subscription#unsubscribe（要求您保存 Subscriptions）或使用 Subject#complete 结束事件流以完成所有订阅 - 但那样并不总是适用。

不这样做可能会导致资源泄漏。 （这取决于实际的 observable 以及它是否在某个时间点关闭）

我通常也会在 ngOnDestroy 生命周期钩子中取消订阅/完成。