Comment anti-rebond des entrées utilisateur dans Angular à l'aide de RxJS ?

Anti-rebond avec Angular 2

AngularJS offrait un moyen pratique d'anti-rebond des modèles à l'aide de la directive ng-model-options. Cependant, avec Angular, il n'existe aucun moyen intégré d'obtenir cette fonctionnalité.

Anti-rebond avec RxJS

Angular exploite RxJS pour la programmation réactive, fournissant un moyen de créer des observables qui peut être utilisé pour la gestion des événements, les flux de données, etc. RxJS fournit l'opérateur debounceTime(), qui émet des valeurs uniquement après qu'une période spécifiée s'est écoulée depuis l'émission la plus récente.

Exemple d'utilisation de RxJS DebounceTime

Pour implémenter l'anti-rebond dans Angular, suivez ces étapes :

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

Ce code utilise debounceTime(1000) pour retarder l'émission de nouvelles valeurs de 1000 millisecondes. Toutes les frappes effectuées au cours de cette période ne déclencheront pas une mise à jour immédiate de la propriété firstName.

Considérations relatives aux performances

L'anti-rebond à l'aide des observables RxJS est efficace, car il ne déclenche pas détection de changement à moins que la période anti-rebond n'expire. Cependant, envisagez de créer des observables en dehors de la zone d'Angular à l'aide de NgZone.runOutsideAngular(), car cela peut encore améliorer les performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!