Wie entprellt man Benutzereingaben in Angular mit RxJS?

Entprellen mit Angular 2

AngularJS bot eine praktische Möglichkeit, Modelle mithilfe der ng-model-options-Direktive zu entprellen. Bei Angular gibt es jedoch keine integrierte Möglichkeit, diese Funktionalität zu erreichen.

Entprellen mit RxJS

Angular nutzt RxJS für reaktive Programmierung und bietet so eine Möglichkeit, Observablen zu erstellen die für die Ereignisverarbeitung, Datenströme und mehr verwendet werden kann. RxJS stellt den debounceTime()-Operator bereit, der Werte erst ausgibt, nachdem ein bestimmter Zeitraum seit der letzten Ausgabe verstrichen ist.

Beispiel für die Verwendung von RxJS DebounceTime

So implementieren Sie die Entprellung in Angular, folgen Sie diesen Schritten:

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

Dieser Code verwendet debounceTime(1000), um die Ausgabe neuer Werte um 1000 Millisekunden zu verzögern. Alle Tastenanschläge, die innerhalb dieses Zeitraums erfolgen, lösen keine sofortige Aktualisierung der Eigenschaft „firstName“ aus.

Überlegungen zur Leistung

Das Entprellen mithilfe von RxJS-Observablen ist effizient, da es nicht auslöst Änderungserkennung, es sei denn, der Entprellungszeitraum läuft ab. Erwägen Sie jedoch die Erstellung von Observablen außerhalb der Angular-Zone mit NgZone.runOutsideAngular(), da dies die Leistung weiter verbessern kann.

Das obige ist der detaillierte Inhalt vonWie entprellt man Benutzereingaben in Angular mit RxJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!