Angular RxJS Observable：takeUntil 与使用订阅取消订阅 [关闭]

Question

有几种方法可以取消订阅 Angular 组件上的 observables（使用 ngOnDestroy）。应该首选以下哪个选项以及为什么（例如技术原因、性能等）？

选项 1：采取Until

使用 RxJS takeUntil 取消订阅

@Component({
  selector: "app-flights",
  templateUrl: "./flights.component.html"
})
export class FlightsComponent implements OnDestroy, OnInit {
  private readonly destroy$ = new Subject();

  public flights: FlightModel[];

  constructor(private readonly flightService: FlightService) {}

  ngOnInit() {
    this.flightService
      .getAll()
      .pipe(takeUntil(this.destroy$))
      .subscribe(flights => (this.flights = flights));
  }

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

选项 2：.unsubscribe()

显式调用 .unsubscribe()，例如通过使用单独的订阅实例

@Component({
  selector: "app-flights",
  templateUrl: "./flights.component.html"
})
export class FlightsComponent implements OnDestroy, OnInit {
  private readonly subscriptions = new Subscription();

  public flights: FlightModel[];

  constructor(private readonly flightService: FlightService) {}

  ngOnInit() {
    const subscription = this.flightService
      .getAll()
      .subscribe(flights => (this.flights = flights));

    this.subscriptions.add(subscription);
  }

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

选项 3：takeWhile

使用 RxJS takeWhile 取消订阅

选项 n：？

Answer 1

• 选项 1：简洁明了。像魅力一样工作
• 选项 2：更程序化，更少流式。奇迹般有效。请注意，您的直播不会收到可能导致意外行为的“完成”事件
• 选项 3：takeWhile - 将保留订阅，直到创建发射，然后评估 takeWhile。这可能导致意外行为。尽管如此，最终还是有效的

TLDR;这里没有错。选择您认为适合您的需求并传达您的意图的内容。

Ben Lesh 还写了一篇关于退订https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87 的不同方式的好文章

他的意见：

您可能应该使用像 takeUntil 这样的运算符来管理您的 RxJS 订阅。根据经验，如果您看到在一个组件中管理两个或多个订阅，您应该想知道是否可以更好地组合这些订阅。

Answer 2

就个人而言，我也选择了选项1，即使用takeUntil。

但是，如here 所述，将takeUntil() 运算符放在管道序列的最后一个RxJS 运算符上很重要。

例如，如果我们不将takeUntil() 作为最后一个运算符，则订阅者将继续订阅后续的switchMap() 运算符：

this.flightService.getAll()
  .pipe(
    takeUntil(this.destroy$),
    switchMap(() => this.doSomethingElse()),
  ).subscribe(flights => (this.flights = flights));

因此，正确的做法是：

this.flightService.getAll()
  .pipe(
    switchMap(() => this.doSomethingElse()),
    takeUntil(this.destroy$),
  ).subscribe(flights => (this.flights = flights));

Brian Love 写了一篇非常好的 article，介绍了取消订阅 observables 的不同方式（包括 unsubscribe() 和 takeUntil() 运算符）。我也建议你看看它。

Answer 3

对于您的示例，我不会选择 3 个选项中的任何一个。当您只想分配一个值时，然后存储 Observable 并使用异步管道订阅它。

@Component({
  selector: "app-flights",
  templateUrl: "./flights.component.html"
})
export class FlightsComponent implements OnDestroy, OnInit {  
  public flights$: Observable<FlightModel[]>;

  constructor(private readonly flightService: FlightService) {}

  ngOnInit() {
    this.flights$ = this.flightService.getAll();
  }
}

<ng-container *ngIf="flights$ | async as flights">
  <ng-container *ngFor="let flight of flights">
    {{ flight | json }}
  </ng-container>
</ng-container>