从库回调中去除用户输入

时间:2016-11-12 11:25:29

标签: angular observable debouncing

我在Angular 2应用程序中使用ng2-ace-editor,我想对用户输入提供一个非常简单的验证,实际上它更像是一个小文本下面的小打印警告(基于用户提供的文本)区域而不是真正的验证。

我们知道最佳做法是去除来自事件的输入,如:

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

然而,ng2-ace-editor提供的唯一输出/回调是@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 */
}

1 个答案:

答案 0 :(得分:2)

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

@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