如何使用 RxJS 有效管理 Angular 2 中的輸入事件？

在Angular 2 管理輸入事件

在AngularJS 中，開發人員可以利用ng-model-options 指令來消除輸入模型更新指令來消除輸入模型更新指令的抖動。在 Angular 2 中，透過使用 RxJS 運算子可以實現類似的功能。

使用 RxJS 去抖動

要在 Angular 2 中對模型進行去抖動，請利用 debounceTime()表單控制項的 valueChanges observable 上的運算子。此運算符延遲後續值的發射，直到最後一個事件後指定的時間過去。

<br>import { debounceTime } from 'rxjs/operators';<p>formCtrlSub = this. firstNameControl.valueChanges</p><pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

<pre class="brush:php;toolbar:false"><p></p>限制事件<p><strong></strong>您也可以限制事件，例如調整大小事件，以防止過多的更新。 ThreatTime() 運算子確保在指定的時間視窗內僅發出一個值。 </p><p></p><pre class="brush:php;toolbar:false">import {throttleTime } from 'rxjs/operators';<p><br>resizeSub = Observable.fromEvent(window, 'resize')</p><p></p><pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

高效率的事件處理

上述方法觸發變更偵測每個事件，即使它們被反跳或節流。為了更有效率的事件處理，請考慮在 Angular 區域之外建立 RxJS Observables，手動觸發訂閱回呼方法中的變更偵測。

<p>ngAfterViewInit() {<br></p><pre class="brush:php;toolbar:false">this.ngZone.runOutsideAngular(() => {
    this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
        ...
    this.resizeSub = Observable.fromEvent(window, 'resize')
        ...
});

}

透過利用RxJS 運算子和主動變更偵測觸發器，您可以有效管理Angular 2 中的輸入事件，確保流暢且響應迅速的使用者互動。

以上是如何使用 RxJS 有效管理 Angular 2 中的輸入事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！