Comment gérer efficacement les événements d'entrée dans Angular 2 à l'aide de RxJS ?

Gestion des événements d'entrée dans Angular 2

Dans AngularJS, les développeurs pouvaient utiliser la directive ng-model-options pour empêcher les mises à jour du modèle d'entrée. Dans Angular 2, une fonctionnalité similaire est disponible grâce à l'utilisation des opérateurs RxJS.

Anti-rebond avec RxJS

Pour anti-rebond d'un modèle dans Angular 2, exploitez le debounceTime() opérateur sur les changements de valeur observables du contrôle de formulaire. Cet opérateur retarde les émissions de valeurs suivantes jusqu'à ce que le temps spécifié s'écoule après le dernier événement.

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

Copier après la connexion

Limitation des événements

Vous pouvez également limiter les événements, tels que les événements de redimensionnement, pour empêcher mises à jour excessives. L'opérateur throttleTime() garantit qu'une seule valeur est émise dans la fenêtre de temps spécifiée.

<br>import { throttleTime } 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
});

Copier après la connexion