Angular 2/Rxjs:我真的需要取消订阅吗?

fre*_*aab 10 memory-leaks rxjs angular

我知道我必须在销毁组件时取消订阅某些Observable(即:具有无限值的Observable )以防止内存泄漏.对于有限的 Observables,我不需要这样做,因为它们将自动完成unsubscribe.

但是如果我在我的组件中创建一个无限 Observable(例如FormGroup.valueChanges,或QueryList.changes),那么这个将被包含它的组件销毁,所以我认为即使我没有取消订阅它们也不会有内存泄漏.

这是一个简单的例子:

@Component({})
export class DummyComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            firstName: [''],
            lastName: ['']
        });
        this.form.valueChanges.subscribe(
            x => console.log(x)
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

在这里,我不是unsubscribe来自this.form.valueChanges; 当我的组件被销毁时,它this.form.valueChanges也会被销毁.

在这种情况下是否会出现内存泄漏?

小智 8

正如Babar所提到的,您需要进行取消订阅才能阻止这些订阅继续观看更改.

对于你的特殊情况,我认为你有一个观点.

当我在同一组件中有大量订阅时,我做的一件事如下.

首先,我创建"订阅",一个空的Subscription类型数组.

private subscriptions: Subscription[] = [];
Run Code Online (Sandbox Code Playgroud)

然后,每次我需要订阅时,我将它推入数组

this.subscriptions.push(this.form.valueChanges.subscribe(x => console.log(x)));
Run Code Online (Sandbox Code Playgroud)

在ngOnDestroy中,我取消订阅数组中的每个订阅.

ngOnDestroy(): void {
  this.subscriptions.forEach((elem) => { elem.unsubscribe(); })
}
Run Code Online (Sandbox Code Playgroud)

  • 您可以使用subscription.add()方法相互添加订阅.然后您只需要取消订阅顶级订阅. (3认同)