Wie verwaltet man Eingabeereignisse in Angular 2 effektiv mit RxJS?

Verwalten von Eingabeereignissen in Angular 2

In AngularJS könnten Entwickler die ng-model-options-Direktive verwenden, um Eingabemodellaktualisierungen zu entprellen. In Angular 2 ist eine ähnliche Funktionalität durch die Verwendung von RxJS-Operatoren verfügbar.

Entprellen mit RxJS

Um ein Modell in Angular 2 zu entprellen, nutzen Sie debounceTime() Operator für die beobachtbare valueChanges-Datei des Formularsteuerelements. Dieser Operator verzögert die Ausgabe nachfolgender Werte, bis die angegebene Zeit nach dem letzten Ereignis verstrichen ist.

<br>import { debounceTime } from 'rxjs/operators';</p>
<p>formCtrlSub = this. firstNameControl.valueChanges</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

Nach dem Login kopieren

Drosseln von Ereignissen

Sie können auch Ereignisse drosseln, wie z. B. Größenänderungsereignisse, um dies zu verhindern übermäßige Updates. Der „drosselTime()“-Operator stellt sicher, dass innerhalb des angegebenen Zeitfensters nur ein Wert ausgegeben wird.

<br>import {drosselTime } from 'rxjs/operators';</p>
<p>resizeSub = Observable.fromEvent(window, 'resize')</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

Nach dem Login kopieren