如何使用 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>

此程式碼使用debounce將新值的發射延遲1000 毫秒。在此期間發生的任何按鍵都不會觸發 firstName 屬性的立即更新。

效能注意事項

使用 RxJS observables 去抖動是高效的，因為它不會觸發除非去抖期到期，否則更改偵測。但是，請考慮使用 NgZone.runOutsideAngular() 在 Angular 區域之外建立可觀察對象，因為這可以進一步提高效能。

以上是如何使用 RxJS 在 Angular 中消除使用者輸入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！