take(1) 和 unsubscribe 之间的区别答案

【问题标题】：difference between take(1) and unsubscribe [duplicate]take(1) 和 unsubscribe 之间的区别
【发布时间】：2019-07-05 10:37:23
【问题描述】：

假设我不使用异步管道。我想在 component.ts 文件中订阅一些东西。如您所知，如果不是 http 请求，我应该自己取消订阅。

这是我尝试过的。

方式1）实现ondestroy钩子并在那里取消订阅

方式 2) 订阅时，使用 take(1) 。 take(1) 会自行取消订阅。

我的问题是 - 为什么有人会选择方式 1 以及当我们想要取消订阅时应该使用哪一种（如果我们不需要异步管道）

【问题讨论】：

【解决方案1】：

答案与 Angular 生命周期有关。

方式 1. 实现 OnDestroy 钩子并在那里取消订阅：

你的组件做这样的事情，很可能在 OnInit 方法中。

this.myObservable$.pipe(takeUntil(this.unsubscribe)).subscribe(myValue => {
  // do something
});

你有一个对应的私有变量和 OnDestroy 生命周期钩子来取消订阅：

private unsubscribe: Subject<void> = new Subject();

ngOnDestroy(): void {
  this.unsubscribe.next();
  this.unsubscribe.complete();
}

当您希望订阅在组件的整个生命周期内持续时，您可以使用它。随着您的 observable 接收到新值，您的订阅将继续接收它们。

方式2.订阅时使用take(1)

this.myObservable$.pipe(take(1)).subscribe(myValue => {
  // do something
});

这种方式将采用第一个发射并取消订阅 observable。当然，如果值在此之后发生变化，您将不会收到更改通知。

方式 1 将帮助您保持动态状态。假设您有一个菜单，并且您想在该菜单上选择一个选项，您希望该组件在它更改时更新，并且无论您需要做什么都足够复杂，您不能使用异步管道。此订阅将在组件的整个生命周期内持续。

根据您要执行的操作，您可能根本不需要订阅。相反，您可以使用 rxjs 运算符自动完成这项工作。例如，请参阅https://brianflove.com/2017/11/01/ngrx-anti-patterns/。

【讨论】：