我有一个带有简单输入标签的angular6应用程序:
<input type="text" name="searchBox" [(ngModel)]="searchTerm" class="form-control" />
我想对searchTerm
属性进行观察,以添加一些运算符,如debounce
等。
我该怎么做(不使用ReactiveForms
)?
答案 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
输出的任何组件将在去抖动后获得更新的值。