如何取消订阅 Angular 4 种反应形式的 valueChanges？

Question

我正在 Angular 4 中制作反应式表格，并在如下表格中寻找 valueChanges：

this.searchForm.valueChanges.subscribe((value) => {
   console.log(value);
});

以上代码完美运行。但是如何取消订阅 ngOnDestroy() 上的 valueChanges 因为 this.searchForm.valueChanges.unsubscribe() 似乎不起作用。请帮我解决这个问题。

Answer 1

subscribe returns 类型 Subscription 的对象，您可以从中 unsubscribe

this.subscription = this.searchForm.valueChanges.subscribe((value) => {
   console.log(value);
});

...

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

Answer 2

@Suren 回答正确，我想添加一些我在订阅很多时使用的代码。

...
this.subscriptions.push(this.searchForm.valueChanges.subscribe((value) => {
   console.log(value);
}));
...

private subscriptions: Subscription[] = [];

ngOnDestroy(): void {
    this.subscriptions.forEach((sub) => {
        sub.unsubscribe();
    })
}

Answer 3

我创建了订阅处理器 class

import { OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';

export class SubscriptionDisposer implements OnDestroy {
  protected ngUnsubscribe: Subject<void> = new Subject<void>();
  constructor() {
  }
   ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

然后你需要通过 SubscriptionDisposer 扩展你的组件 class 你的代码看起来像

this.searchForm.valueChanges
.takeUntil(this.ngUnsubscribe)
.subscribe((value) => {
   console.log(value);
});

Answer 4

这个post有正确的解决方案。在少数情况下不起作用，因为可能有多个订阅。

您必须检查所有订阅并确保您取消订阅所有订阅。

如何取消订阅 Angular 4 种反应形式的 valueChanges？

How to unsubscribe from valueChanges in Angular 4 reactive forms?

typescript

angular

angular4-forms