Comment implémenter l'anti-rebond dans Angular 2 ?

Anti-rebond angulaire 2

L'anti-rebond est une technique utilisée en programmation pour retarder l'exécution d'une tâche jusqu'à ce qu'une période de temps spécifiée se soit écoulée depuis l'appel le plus récent à cette tâche. Dans Angular, l'anti-rebond peut être utilisé pour améliorer les performances de vos applications en réduisant le nombre de fois où votre application effectue des opérations coûteuses.

Dans AngularJS, l'anti-rebond était géré à l'aide de la directive ng-model-options. Cependant, dans Angular 2, il n'y a pas de fonction anti-rebond intégrée. Au lieu de cela, vous pouvez utiliser l'opérateur RxJS debounceTime() sur les valueChanges observables d'un contrôle de formulaire.

Voici un exemple de la façon d'anticiper un contrôle de formulaire dans Angular 2 :

<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() {
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

Dans Dans cet exemple, nous créons d'abord un nouveau FormControl nommé firstNameControl. Ensuite, nous nous abonnons aux valueChanges observables du contrôle de formulaire. Nous utilisons l'opérateur debounceTime() pour retarder l'exécution de la fonction de rappel jusqu'à ce que 1 000 millisecondes se soient écoulées depuis la dernière fois que la valeur d'entrée a été modifiée.

L'opérateur debounceTime() n'est que l'un des nombreux opérateurs RxJS qui peuvent être utilisé pour manipuler et filtrer les observables. Pour plus d'informations sur les opérateurs RxJS, veuillez vous référer à la documentation RxJS.

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!