如何观察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将在去抖发生后获得更新的值。