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>
<pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

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>
<pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

Effiziente Ereignisbehandlung

Die oben genannten Ansätze lösen Veränderungen aus Erkennung bei jedem Ereignis, auch wenn es entprellt oder gedrosselt wird. Für eine effizientere Ereignisbehandlung sollten Sie erwägen, RxJS-Observables außerhalb der Angular-Zone zu erstellen und die Änderungserkennung in Subscribe-Callback-Methoden manuell auszulösen.

<br>ngAfterViewInit() {</p>
<pre class="brush:php;toolbar:false">this.ngZone.runOutsideAngular(() => {
    this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
        ...
    this.resizeSub = Observable.fromEvent(window, 'resize')
        ...
});

}

Durch die Verwendung von RxJS-Operatoren und proaktiven Änderungserkennungsauslösern können Sie Eingabeereignisse in Angular 2 effektiv verwalten und so reibungslose und reaktionsschnelle Benutzerinteraktionen gewährleisten.

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