라이브러리 콜백에서 사용자 입력 디버깅

Question

내 Angular 2 응용 프로그램에서 ng2-ace-editor을 사용하고 있는데 사용자 입력에 대해 매우 간단한 유효성 검사를 제공하고 싶습니다. 실제로는 사용자가 제공 한 텍스트를 기반으로 한 작은 인쇄 경고 일뿐입니다. 진정한 검증보다는 텍스트 영역 아래에 있어야합니다.

우리는 가장 좋은 방법은 입력이 같이 이벤트에서 오는 진동을 소거하는 것입니다 아시다시피 그러나

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)" 

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.