Депрессия ввода данных из обратного вызова библиотеки

Question

Я использую ng2-ace-editor в своем приложении Angular 2, и я хочу предоставить очень простую проверку на пользовательском входе, на самом деле это будет скорее небольшое предупреждение о печати (на основе предоставленного пользователем текста) ниже текстовой области, а не истинной проверки.

Как мы знаем, лучшая практика дребезга вход, исходящее от события, как:

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

Однако единственный выход/обратного вызова, NG2-ас-редактор обеспечивает это @output (textChanged) который генерируется из библиотеки editor.on('change', fn), которая, как представляется, не использует какой-либо дебют.

Следовательно, мой вопрос: какой был бы лучший человек, который мог бы получить с таким API? Будет ли смысл иметь код ниже (повторное вызов Observable.from с входящими значениями)?

HTML

(textChanged)="myTextChanged($event)" 

ц:

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.