Question

我有多个订阅功能。首先我在ngOnInit（）上有它，然后我有另一个名为onSelectVillain（）的函数。所以我的问题是你可以使用this.subscription.unsubscribe（）。或者我应该宣布另一个订阅？

subscription: Subscription;

    ngOnInit() {
      this.subscription = this.heroService.getHeroes()
                       .subscribe(
                         heroes => this.heroes = heroes,
                         error =>  this.errorMessage = <any>error);
    }

    onSelectVillain(event) {
      this.subscription = this.villainService.getVillains()
                       .subscribe(
                         .....
    }

    ngOnDestroy(){
     this.subscription.unsubscribe()
    }

Answer 1

使用单独的订阅会更加清晰 - 如果您使用相同的字段，则永远不会（手动）取消订阅第一个订阅。此外，如果您不希望组件包含大量字段，那么只需保留订阅引用，我建议使用一种模式，即只使用一个主题，在ngOnDestroy中触发，在每次订阅之前，您将使用takeUntil。所以你的代码看起来像这样：

private ngUnsubscribe = new Subject();

ngOnInit() {
  this.heroService.getHeroes()
                  .takeUntil(this.ngUnsubscribe)
                  .subscribe(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

onSelectVillain(event) {
  this.villainService.getVillains()
                     .takeUntil(this.ngUnsubscribe)
                     .subscribe(
                     .....
}

ngOnDestroy(){
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
}

有关详细信息，请参阅this。

请注意，“有限”的订阅，即调用完整状态的订阅，不一定需要手动取消订阅。 This可能是一个很好的参考点。

Answer 2

更换subscription值后，之前的订阅会丢失，与其他任何值都没有区别。

更简洁的方法是让不同的订阅具有有意义的名称 - heroesSubscription，villainsSubscription等：

heroesSubscription: Subscription;
villainsSubscription: Subscription;

ngOnInit() {
  this.heroesSubscription = this.heroService.getHeroes().subscribe(...);
}

onSelectVillain(event) {
  // possibly needs to unsubscribe previous subscription
  if (this.villainsSubscription)
    this.villainsSubscription.unsubscribe()

  this.villainsSubscription = this.villainService.getVillains().subscribe(...)
}

ngOnDestroy(){
 this.heroesSubscription.unsubscribe()
 this.villainsSubscription.unsubscribe()
}

如果可能多次调用onSelectVillain，则应取消订阅以前的订阅。

代码并未显示手动订阅的好处。当只在视图中使用可观察值时，可以使用async管道，因为它会自动执行所有订阅/取消订阅：

{{ heroService.getHeroes() | async }}

取消订阅不同功能的多个订阅

2 个答案: