RxJS を使用して Angular でユーザー入力をデバウンスする方法?

Angular 2 によるデバウンス

AngularJS は、ng-model-options ディレクティブを使用してモデルをデバウンスする便利な方法を提供しました。ただし、Angular では、この機能を実現する組み込みの方法はありません。

RxJS によるデバウンス

Angular は、リアクティブ プログラミングに RxJS を活用し、オブザーバブルを作成する手段を提供します。イベント処理やデータ ストリームなどに使用できます。 RxJS は debounceTime() オペレーターを提供します。これは、最新の発行から指定された期間が経過した後にのみ値を発行します。

RxJS DebounceTime の使用例

デバウンスを実装するにはAngular の場合は、次の手順に従ってください:

<code class="typescript">import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
               <br>{{firstName}}`
})
export class AppComponent {
  firstName = 'Name';
  firstNameControl = new FormControl();
  ngOnInit() {
    // Debounce keystroke events
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

このコードは debounceTime(1000) を使用して、新しい値の発行を 1000 ミリ秒遅らせます。その期間内にキーストロークが発生しても、firstName プロパティの即時更新はトリガーされません。

パフォーマンスに関する考慮事項

RxJS オブザーバブルを使用したデバウンスはトリガーされないため効率的です。デバウンス期間が経過しない限り、変更検出は行われません。ただし、パフォーマンスをさらに向上させることができるため、NgZone.runOutsideAngular() を使用して Angular のゾーンの外側にオブザーバブルを作成することを検討してください。

以上がRxJS を使用して Angular でユーザー入力をデバウンスする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。