Как отписаться от valueChanges в Angular 4 реактивных форм?

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

Answer 4

У этого поста есть правильное решение. В некоторых случаях не работает, потому что может быть несколько подписок.

Вы должны проверить все подписки и убедиться, что вы отказываетесь от подписки на все из них.