取消订阅一系列订阅

Question

在 Angular 应用程序中，我通过将订阅全部推送到数组中来管理订阅，然后循环遍历它并在

ngOnDestroy

期间取消订阅。

private subscriptions: Subscription[] = []
this.subscriptions.push(someObservable.subscribe(foo => bar))

我的问题是我还没有找到足够干净的方法来处理取消订阅。理想的方法是简单的

ngOnDestroy () {
    this.subscriptions.forEach(subscription => subscription.unsubscribe())
}

但这不起作用。值得注意的是，我在注销后仍然收到 Firebase 权限错误（“工作”方法不会发生这种情况）。有趣的是，如果我将它放入一个单独的类中，则完全相同的方法确实有效：

export class Utils {
    public static unsubscribeAll (subObject: {subscriptions: Subscription[]}) {
        subObject.subscriptions.forEach(subscription => subscription.unsubscribe())
    }
}

// ---------- back to the component

ngOnDestroy () {
    Utils.unsubscribeAll({subscriptions: this.subscriptions}) // no Firebase errors
}

但我不太喜欢这个解决方案，主要是因为只有当我将数组包装在一个对象中以便它作为引用传递时它才有效。我发现的另一种工作方法是将其编写为 for 循环：

ngOnDestroy () {
    /* tslint:disable */
    for (let i = 0; i < this.subscriptions.length; i++) {
        this.subscriptions[i].unsubscribe()
    }
    /* tslint:enable */
}

但除了不必要的长度之外，它也让 TSLint 抱怨，因为它认为我应该使用 for-of 循环（这不起作用），所以我每次都必须添加额外的注释。

目前我使用 Utils 选项作为“最佳”解决方案，但我仍然不满意。有没有一种我所缺少的更干净的方法来做到这一点？

Answer 1

既然没有人愿意将他们的答案发布为答案，我想我会这样做。

如果您仅使用数组将它们分组以进行批量取消订阅，则可以通过将它们合并到现有订阅中来完成相同的操作。对于我的设置，只需将空数组更改为空订阅并将

push

 更改为 

add

:

private subscriptions = new Subscription()
this.subscriptions.add(someObservable.subscribe(foo => bar))

然后，当您想取消所有订阅时，只需取消订阅容器订阅即可，它将处理所有事情。

ngOnDestroy () {
    this.subscriptions.unsubscribe()
}

注意：您也可以在每个单独的订阅上使用

takeUntil

，但我觉得这种方法更简单，并且对我正在做的事情更有意义。

Answer 2

我必须写另一个答案，因为第一个答案

不对我有用：

   private subscriptions = new Subscription();
   this.subscriptions.add(someObservable.subscribe(foo => bar));

以下是

工作的方式之一：

   private subscriptions = [];

   subscriptions.push(someObservable1.subscribe(foo => bar));
   subscriptions.push(someObservable2.subscribe(foo => bar));
   subscriptions.push(someObservable3.subscribe(foo => bar));
   subscriptions.push(...);


   subscriptions.forEach(subscription => subscription.unsubscribe());

我以前也见过这样的工作。

Answer 3

subs: Subscription[] = [];

ngOnInit(): void {
    this.subs.push(someObservable.subscribe(foo => bar));
}

ngOnDestroy(): void {
    this.subs.map(s => s.unsubscribe);
}