Question

我正在Angular 4中制作一个反应形式，并在下面的表格中寻找valueChanges：

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

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

Answer 1

subscribe会返回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

我创建了Subscription disposer类

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扩展您的组件类您的代码看起来像

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

Answer 4

此帖子具有正确的解决方案。在某些情况下，由于可能存在多个订阅而无法正常工作。

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

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

4 个答案: