Angular 2 でデバウンスを実装するにはどうすればよいですか?

Angular 2 デバウンス

デバウンスは、指定された時間が経過するまでタスクの実行を遅らせるためにプログラミングで使用される手法です。そのタスクへの最新の呼び出し。 Angular では、デバウンスを使用して、アプリケーションが高コストの操作を実行する回数を減らし、アプリケーションのパフォーマンスを向上させることができます。

AngularJS では、デバウンスは ng-model-options ディレクティブを使用して処理されました。ただし、Angular 2 にはデバウンス機能が組み込まれていません。代わりに、フォーム コントロールの valueChanges オブザーバブルで RxJS debounceTime() 演算子を使用できます。

Angular 2 でフォーム コントロールをデバウンスする方法の例を次に示します。

<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() {
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

Inこの例では、まず firstNameControl という名前の新しい FormControl を作成します。次に、フォーム コントロールの valueChanges オブザーバブルをサブスクライブします。 debounceTime() 演算子を使用して、入力値が最後に変更されてから 1000 ミリ秒が経過するまでコールバック関数の実行を遅らせます。

debounceTime() 演算子は、多くの RxJS 演算子の 1 つにすぎません。オブザーバブルの操作とフィルタリングに使用されます。 RxJS 演算子の詳細については、RxJS ドキュメントを参照してください。

以上がAngular 2 でデバウンスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。