ライブラリコールバックからのユーザー入力のデバウンス

Question

私はAngular 2アプリケーションでng2-ace-editorを使用しています。ユーザー入力に関する非常に簡単な検証を提供したいのですが、実際には小さな印刷警告（ユーザー提供のテキストに基づく）真の検証ではなくテキスト領域の下にある。しかし、NG2-ACE-エディタが提供する出力のみ/コールバックがある@output (textChanged)ある

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

：私たちはのようにベストプラクティスは、イベントからの入力をデバウンスすることである知っているよう

ライブラリの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。