为什么 Angular 不会自动取消订阅所有活动订阅,也许是在组件销毁时?

时间:2021-04-11 17:17:30

标签: angular rxjs

还是应该由 RxJS 来处理活动订阅?谁,为什么不自动取消订阅所有活动订阅或至少提供一个标志来自动取消订阅或取消订阅组件销毁或某些最终事件的所有订阅者?

1 个答案:

答案 0 :(得分:1)

作为开发者,您可以自行管理订阅。如何管理订阅由您和您的团队自行决定。

通过利用 RxJS 的运算符和 Angular 的方法,您可以更轻松地取消订阅。

例如,我们可以有一个扩展 Unsubscribe 并实现 OnDestroy 的组件。

export class AppComponent  extends Unsubscribe  implements OnDestroy{...}

Unsubscribe 类允许任何组件有一个主题来取消订阅每个 Observable

class Unsubscribe {
  public readonly destroy = new Subject<void>()


  protected destroySubs() {
    this.destroy.next()
  }
}

我们拥有的任何订阅(不在我们的模板中)都将使用 takeUntil operator 来使订阅保持活动状态,直到组件被销毁

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  extends Unsubscribe  implements OnDestroy{
  name = 'Angular ' + VERSION.major;

  someSubscription: Subscription

  constructor() {
    super()
    this.someSubscription = interval(1000).pipe(takeUntil(this.destroy)).subscribe(console.log)

    setTimeout(() => {
      this.ngOnDestroy()
    }, 5000)
  }

  ngOnDestroy() {
    this.destroySubs()
  }
}

这是一个代码示例。尝试在 chrome 中运行它并观察控制台中发生的情况:https://stackblitz.com/edit/angular-unsbscribe-ex?file=src/app/app.component.ts