RxJS를 사용하여 Angular 2에서 입력 이벤트를 효과적으로 관리하는 방법은 무엇입니까?

Angular 2에서 입력 이벤트 관리

AngularJS에서 개발자는 ng-model-options 지시문을 활용하여 입력 모델 업데이트를 디바운스할 수 있습니다. Angular 2에서는 RxJS 연산자를 사용하여 비슷한 기능을 사용할 수 있습니다.

RxJS로 디바운싱

Angular 2에서 모델을 디바운스하려면 debounceTime()을 활용하세요. 양식 컨트롤의 valueChanges에 대한 연산자가 관찰 가능합니다. 이 연산자는 마지막 이벤트 이후 지정된 시간이 경과할 때까지 후속 값 방출을 지연합니다.

<br>import { debounceTime } from 'rxjs/operators';</p>
<p>formCtrlSub = this. firstNameControl.valueChanges</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

로그인 후 복사

이벤트 제한

또한 이벤트 크기 조정과 같은 이벤트를 제한하여 과도한 업데이트. throttleTime() 연산자는 지정된 시간 창 내에서 하나의 값만 방출되도록 보장합니다.

<br>import { throttleTime } from 'rxjs/operators';</p>
<p>resizeSub = Observable.fromEvent(window, 'resize')</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

로그인 후 복사