如何使用 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 observables 去抖动是高效的，因为它不会触发除非去抖期到期，否则更改检测。但是，请考虑使用 NgZone.runOutsideAngular() 在 Angular 区域之外创建可观察对象，因为这可以进一步提高性能。

以上是如何使用 RxJS 在 Angular 中消除用户输入？的详细内容。更多信息请关注PHP中文网其他相关文章！