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() オペレーターは、指定された時間枠内で 1 つの値のみが出力されるようにします。

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

ログイン後にコピー