如何观察rxjs中的属性更改?

时间:2018-05-17 13:13:32

标签: angular rxjs

我有一个带有简单输入标签的angular6应用程序:

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

我想对searchTerm属性进行观察,以添加一些运算符,如debounce等。

我该怎么做(不使用ReactiveForms)?

1 个答案:

答案 0 :(得分:2)

有几种方法可以实现这一目标。我找到的最简单的内容如下:

模板应包含:

<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输出的任何组件将在去抖动后获得更新的值。