Angular RxJS Observable : takeUntil vs.取消订阅

Question

Closed. This question is opinion-based。它当前不接受答案。












想要改善这个问题吗？更新问题，以便 editing this post用事实和引用来回答。

1年前关闭。



Improve this question




有几种方法可以取消订阅Angular组件上的可观察对象(通过使用ngOnDestroy)。以下哪个选项应该是首选，为什么(例如技术原因，性能等)？

选项1:takeUntil

使用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:采取行动

取消订阅时使用RxJS take

选项n:

最佳答案

选项1:干净且明确。像魅力

一样工作

选项2:更多过程，更少流。奇迹般有效。请注意，您的流将不会收到“complete”事件，这可能会导致意外行为

选项3:takeWhile-将保留订阅直到创建发射，然后评估takeWhile。这可能会导致意外的行为。不过，最后的作品

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

本·莱什(Ben Lesh)也写了一篇不错的文章，介绍了取消 https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87的不同方式

他的意见:

You should probably be using operators like takeUntil to manage your RxJS subscriptions. As a rule of thumb, if you see two or more subscriptions being managed in a single component, you should wonder if you could be composing those better.

关于Angular RxJS Observable : takeUntil vs.取消订阅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58428791/

上一篇：google-cloud-platform - 部署 Google Cloud Endpoints 配置失败 Google API Linter 建议

下一篇：ios - 带有大标题导航的 UITableView UIRefreshControl 不会粘在顶部 - 它会移动

相关文章：

javascript - Angular 2 foreach 在数组被另一个函数更改之前执行

angular - "Type ' EventEmitter ' is not generic" Angular 错误

Angular rxjs Observer 泛型类型需要 1 个参数

javascript - 从可观察同步获取数据。 Angular

javascript - D3js v5 中的有界静态力布局

r - 具有动态文本的 ShinyApp 出现在多个 UI 元素的任何更改上

Angular 7 SSR第一次加载两次

node.js - 将 Node.js 服务器和 Angular 应用程序部署到 Azure Web 服务

javascript - 对 subscribe() 和 unsubscribe() 的操作

javascript - 结合 withLatestFrom 为 Observable "prevents"订阅添加延迟

Answer 1

选项1:干净且明确。像魅力

一样工作

选项2:更多过程，更少流。奇迹般有效。请注意，您的流将不会收到“complete”事件，这可能会导致意外行为

选项3:takeWhile-将保留订阅直到创建发射，然后评估takeWhile。这可能会导致意外的行为。不过，最后的作品

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

本·莱什(Ben Lesh)也写了一篇不错的文章，介绍了取消 https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87的不同方式

他的意见:

You should probably be using operators like takeUntil to manage your RxJS subscriptions. As a rule of thumb, if you see two or more subscriptions being managed in a single component, you should wonder if you could be composing those better.