取消订阅订阅数组

Joh*_*ery 12 rxjs typescript angular

在一个Angular应用程序中,我通过将它们全部推送到一个数组中来管理我的订阅,然后循环遍历它并取消订阅ngOnDestroy.

private subscriptions: Subscription[] = []
this.subscriptions.push(someObservable.subscribe(foo => bar))
Run Code Online (Sandbox Code Playgroud)

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

ngOnDestroy () {
    this.subscriptions.forEach(subscription => subscription.unsubscribe())
}
Run Code Online (Sandbox Code Playgroud)

但这不起作用.值得注意的是,我在注销后仍然收到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
}
Run Code Online (Sandbox Code Playgroud)

但我真的不喜欢这个解决方案,主要是因为它只有在我将数组包装在一个对象中才能作为参考传递.我发现的另一种工作方法是将其写为for循环:

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

但除了不必要的长度之外,它还会使TSLint抱怨,因为它认为我应该使用for-of循环(这不起作用)所以我每次都要抛出额外的注释.

目前我正在使用Utils选项作为"最佳"解决方案,但我仍然不满意.是否有一种更清洁的方式来做到这一点,我错过了?

Joh*_*ery 27

由于没有人想将答案作为答案发布,我想我会这样做.

如果您只是使用数组将它们分组以进行大规模取消订阅,则可以通过将它们合并到现有订阅中来完成相同的操作.对于我的设置,只需将空数组更改push为空订阅并更改为add:

private subscriptions = new Subscription()
this.subscriptions.add(someObservable.subscribe(foo => bar))
Run Code Online (Sandbox Code Playgroud)

然后,当您想要取消订阅所有内容时,只需取消订阅容器订阅即可处理所有内容.

ngOnDestroy () {
    this.subscriptions.unsubscribe()
}
Run Code Online (Sandbox Code Playgroud)

注意:您也可以takeUntil在每个订阅上使用,但我觉得这种方法更简单,对我正在做的事情更有意义.

  • @Rafael在这种情况下你需要维护一个单独的引用,比如`this.foo = someObservable.subscribe(); this.subscriptions.add(this.foo)` 然后您可以单独取消订阅它或与所有其他订阅一起取消订阅。 (2认同)