从库回调中去抖动用户输入

Question

我在我的 Angular 2 应用程序中使用 ng2-ace-editor，我想对用户输入提供一个非常简单的验证，实际上它更像是一个小字警告（基于用户- provided text) below the text area 而不是真正的验证。

众所周知，最佳做法是对来自事件的输入进行去抖动，如：

Observable.fromEvent(elementRef.nativeElement, 'keyup')
        .map(() => myTextArea.value)
        .debounceTime(300)
        .distinctUntilChanged();

然而，ng2-ace-editor 提供的唯一 output/callback 是 @Output (textChanged)，它是从库的 editor.on('change', fn) 生成的，它似乎没有使用任何类型的去抖动.

因此我的问题是：一个人能从这样的 API 得到什么最好的东西？下面的代码（使用传入值重复调用 Observable.from）是否有意义？

html

(textChanged)="myTextChanged($event)"

ts:

myTextChanged($event){
    Observable.from([$event])
        .debounceTime(300)
        .distinctUntilChanged()
        .subscribe(text => this.myValidation(text));
}

myValidation(){
    /* analyze the input and show/hide a warning */
}

Answer 1

最好有一个你可以订阅的东西，然后将文本更改事件推送到它上面。例如：

@Component(...)
export class MyComponent implements OnInit {

    textChange = new Subject<string>();

    ngOnInit() {
      this.textChange
        .debounceTime(300)
        .distinctUntilChanged()
        .subscribe(text => this.myValidation(text));
    }

    myTextChanged($event) {
        this.textChange.next($event);
    }

    ...

}

这意味着您仅在 ngOnInit 中设置了一次订阅，并简化了 myTextChanged 方法以仅将新更改广播到主题的可观察流中。

您还可以使用 ViewChild 来更直接地访问子发射器，例如参见Component Communication.

从库回调中去抖动用户输入

Debouncing user input from a library callback

observable

debouncing

angular