Angular 4-退订的最佳方式 [英] Angular 4 - Best way of unsubscribing

问题描述

我很好奇我应该如何取消所有订阅.我知道takeWhile()和takeUntil().我发现takeUntil()更适合我.

I am curious on how am I suppose to unsubscribe all my subscriptions. I knew about the takeWhile() and takeUntil(). I find the takeUntil() more usable for me.

据我了解，takeWhile()在获取数据后生效.然后取消订阅，直到组件销毁为止.

as far as I understand, takeWhile() take effects after we get the data. then unsubscribe until the component is destroy.

使用takeUntil()和不使用它有什么区别.只是.unsubscribe()?

Whats is the difference of using takeUntil() and not using it. just .unsubscribe()?

不使用takeUntil()

ngOnInit() {
 this.subscriptions = this._membersService.getMembers().subscribe(data => 
 this.members = data)
}

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

使用takeUntil

private destroyed$: Subject<{}> = new Subject();

ngOnInit() {
 this._membersService.getMembers().takeUntil(this.destroyed$).subscribe(data 
 => this.members = data)
}

ngOnDestroy() {
  this.destroyed$.next();
}

还要如何确定我是否成功退订?

also how can I determine If I unsubscribe successfully?

推荐答案

主要区别在于思维方式和样板.

The main difference is the way of thinking... and the boilerplate.

如果没有takeUntil，当文件的大小和代码行数增加时，您可能会得到如下结果:

Without takeUntil, when your file will grow in size and lines of code, you might end up with something like that:

private subscription1: Subscription;
private subscription2: Subscription;
private subscription3: Subscription;
private subscription4: Subscription;
private subscription5: Subscription;
private subscription6: Subscription;

ngOnInit() {
  this.subscription1 = this.service.method().subscribe(...);
  this.subscription2 = this.service.method().subscribe(...);
  this.subscription3 = this.service.method().subscribe(...);
  this.subscription4 = this.service.method().subscribe(...);
  this.subscription5 = this.service.method().subscribe(...);
  this.subscription6 = this.service.method().subscribe(...);
}

ngOnDestroy() {
  this.subscription1.unsubscribe();
  this.subscription2.unsubscribe();
  this.subscription3.unsubscribe();
  this.subscription4.unsubscribe();
  this.subscription5.unsubscribe();
  this.subscription6.unsubscribe();
}

或者，您可以声明一个订阅数组并推送到其中.

Or, you might declare an array of subscriptions and push into it.

这两个似乎都不是很方便，如果您最终使用了很多包含订阅的方法，那么如果不滚动到.

Both doesn't seem to be very handy and if you end up with many methods, containing subscriptions, you won't be able to see whether they're being unsubscribed or not if you don't scroll to the ngOnDestroy.

另一方面，使用Subject更具可读性:

On the other hand, using a Subject is much more readable:

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

ngOnInit() {
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
}

ngOnDestroy() {
  this.onDestroy$.next();
  this.onDestroy$.complete();
}

即使将订阅划分为整个文件，也可以仅检查takeUntil(this.onDestroy$)是否存在.

Even if subscriptions are divided across the whole file, you can just check whether takeUntil(this.onDestroy$) is present or not.

它也更接近Rxjs和处理流的想法.

It's also closer to the idea of Rxjs and dealing with streams.

现在，要确保某些内容未被订阅，您可以只使用subscribe的第三个参数:

Now, to make sure something is being unsubscribed, you can just use the third argument of subscribe:

this.service.method().takeUntil(this.onDestroy$).subscribe(
  onNext => ...,
  onError => ...,
  onComplete => console.log('stream has been completed')
);

如果您不喜欢在subscribe方法中放入任何内容，则可以执行以下操作:

If you don't like to put anything into the subscribe method, you could do that:

this.service.method().takeUntil(this.onDestroy$)
.do({
  complete => console.log('stream has been completed')
})
.subscribe();

---

如果您想进一步研究该主题，则应阅读 Ben Lesh 的精彩文章: 查看全文