Как наблюдать за изменением свойства в rxjs?

Question

У меня есть приложение angular6 с простым тегом ввода:

<input type="text" name="searchBox" [(ngModel)]="searchTerm" class="form-control" />

Я бы хотел сделать наблюдаемым свойство searchTerm, чтобы добавить некоторые операторы, такие как debounce, и т. Д., И т. Д.

Как я могу это сделать (без использования ReactiveForms)?

Answer 1

Есть несколько способов сделать это. Самое простое, что я нашел, это:

Шаблон должен содержать:

<input
  #searchInput
  [(ngModel)]="searchTerm"
  type="text"
  (keyup)="onChange(searchInput.value)" />

Компонент должен иметь:

  import { Subject } from 'rxjs';
  import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

  @Output() inputChanged: EventEmitter<string> = new EventEmitter<string>();
  input = new Subject<string>();

  constructor() {
    this.input
        .pipe(debounceTime(300))
        .pipe(distinctUntilChanged())
        .subscribe(input => this.emitInputChanged(input));
  }

  onChange(input: string) {
     this.input.next(input);
  }

На Subject можно подписаться. Вы можете передать другие ваши функции (например, debounce), а затем отправлять изменения в конце цепочки. Я не знаю, для чего вы используете ngModel, но так как у вас есть это в вашем вопросе, я оставил его. Любой компонент, который прослушивает вывод inputChanged, получит обновленное значение после того, как произойдет отладка.