Question

我很想知道如何取消订阅我的所有订阅。我知道takeWhile（）和takeUntil（）。我发现takeUntil（）对我来说更有用。

据我所知，takeWhile（）在获取数据后生效。然后取消订阅，直到组件被销毁。

使用takeUntil（）和不使用它的区别是什么。只是.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();
}

我如何确定如果我成功取消订阅？

Answer 1

主要区别在于思考方式......以及样板。

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

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();
}

或者，您可以声明一个订阅数组并推送到它。

两者似乎都不是很方便，如果你最终有很多方法，包含订阅，如果你不滚动到{{{}，你将无法看到它们是否被取消订阅1}}。

另一方面，使用ngOnDestroy更具可读性：

Subject

即使订阅在整个文件中划分，您也可以检查是否存在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(); }。

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

现在，为了确保取消订阅某些内容，您可以使用subscribe的第三个参数：

takeUntil(this.onDestroy$)

如果您不想在订阅方法中添加任何内容，可以这样做：

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

如果你想进一步深入讨论这个主题，你应该阅读 Ben Lesh 这篇优秀的文章：https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

Answer 2

推荐的方法是使用RxJS运算符，如 takeUntil（） 运算符，如@ maxime1992所述，但 takeUntil（） 不是您可以使用其他RxJS运算符的作业的唯一运算符，例如 takeWhile（） ，（）， elementAt（） 等。您可以找到详细解释here。

Angular 4 - 取消订阅的最佳方式

2 个答案: