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

Angular でのデバウンス

質問:

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

答え:

Angular 2 では、フォーム コントロール値の変更時に RxJS 演算子を使用してデバウンスを実現できます。例:

<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>

このコードは、1000 ミリ秒の遅延でキーストローク イベントをデバウンスします。

最適化テクニック:

一方、上記のアプローチは有効である場合、不必要に変更検出がトリガーされる可能性があります。効率を高めるために、Angular の変更検出ゾーンの外で RxJS Observable を作成し、ChangeDetectorRef.detectChanges() を手動で呼び出すことを検討してください。

<code class="typescript">import {Component, NgZone, ChangeDetectorRef, ApplicationRef, 
        ViewChild, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input #input type=text [value]="firstName">
    <br>{{firstName}}`
})
export class AppComponent {
  ngAfterViewInit() {
    Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
      .debounceTime(1000)
      .subscribe(keyboardEvent => {
        this.firstName = keyboardEvent.target.value;
        this.cdref.detectChanges();
      });
  }
}</code>

このアプローチにより、不要な変更検出が防止され、パフォーマンスが向上します。

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