我在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 */
}
答案 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