Angular&RX:改进了订阅收集

smn*_*brv 4 rxjs typescript rxjs5 angular

更新

找到解决方案后,我根据接受的答案编写了一个小助手ng2-rx-collector,使其更易于使用.希望它可以帮助一个人一次又一次地面对同样的问题.

原始问题

假设我们在hot observables上有一个包含两个订阅的组件.我们订阅它们ngOnInit并取消订阅ngOnDestroy以避免内存泄漏/意外行为:

public ngOnInit() {
  this.s1 = o1.subscribe(console.debug.bind(console));
  this.s2 = o2.subscribe(console.debug.bind(console));
}

public ngOnDestroy() {
  this.s1.unsubscribe();
  this.s2.unsubscribe();
}
Run Code Online (Sandbox Code Playgroud)

我喜欢Rx,但每次我需要遵循这个时,我真的想要自杀:

  1. 为每个订阅创建一个私有订阅属性
  2. 将此属性分配给订阅(这看起来很丑陋,因为真正的逻辑转到了右侧)
  3. 取消订阅destroy上的每个订阅

有没有办法改善这个?

例如在RxSwift中他们有一个DisposeBag为了改进过程,翻译成打字稿将是:

private let bag = DisposeBag();

...

o1.subscribe(...).addDisposableTo(bag);
Run Code Online (Sandbox Code Playgroud)

然后只破坏它一次.问题是我找不到任何类似的Subscription功能.

任何想法/提示都会受到热烈欢迎.

phi*_*ooo 5

你可以这样做:

private teardown$ = new Subject<void>();

public ngOnInit() {
    o1.takeUntil(this.teardown$).subscribe(console.debug.bind(console));
    o2.takeUntil(this.teardown$).subscribe(console.debug.bind(console));
}

public ngOnDestroy() {
   this.teardown$.next();
}
Run Code Online (Sandbox Code Playgroud)