如何退订Angular 4反应形式的valueChanges？

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

我创建了订阅处理程序类

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);
});