如何使用 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);

限制事件

您还可以限制事件，例如调整大小事件，以防止过多的更新。 ThreatTime() 运算符确保在指定的时间窗口内仅发出一个值。

<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
});

登录后复制

高效的事件处理

上述方法触发更改检测每个事件，即使它们被反跳或节流。为了更高效的事件处理，请考虑在 Angular 区域之外创建 RxJS Observables，手动触发订阅回调方法中的更改检测。

<br>ngAfterViewInit() {<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中文网其他相关文章！