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>
<pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

イベントの調整

サイズ変更イベントなどのイベントを調整して、過剰なアップデート。 throttleTime() オペレーターは、指定された時間枠内で 1 つの値のみが出力されるようにします。

<br>import { throttleTime } from 'rxjs/operators';</p>
<p>resizeSub = Observable.fromEvent(window, 'resize')</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 Observable を作成し、サブスクライブ コールバック メソッドで変更検出を手動でトリガーすることを検討してください。

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

RxJS 演算子とプロアクティブな変更検出トリガーを利用することで、Angular 2 で入力イベントを効果的に管理し、スムーズで応答性の高いユーザー インタラクションを保証できます。

以上がRxJS を使用して Angular 2 で入力イベントを効果的に管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。