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

Anti-rebond dans Angular

Question :

Comment l'anti-rebond peut-il être implémenté dans Angular ?

Réponse :

Dans Angular 2, l'anti-rebond peut être obtenu à l'aide d'opérateurs RxJS sur les changements de valeur de contrôle de formulaire. Par exemple :

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

Ce code fait rebondir les événements de frappe avec un délai de 1 000 millisecondes.

Techniques d'optimisation :

Bien que l'approche ci-dessus soit valide, il peut déclencher inutilement une détection de changement. Pour plus d'efficacité, envisagez de créer des observables RxJS en dehors de la zone de détection des changements d'Angular et d'appeler manuellement ChangeDetectorRef.detectChanges().

<code class="typescript">import {Component, NgZone, ChangeDetectorRef, ApplicationRef, 
        ViewChild, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input #input type=text [value]="firstName">
    <br>{{firstName}}`
})
export class AppComponent {
  ngAfterViewInit() {
    Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
      .debounceTime(1000)
      .subscribe(keyboardEvent => {
        this.firstName = keyboardEvent.target.value;
        this.cdref.detectChanges();
      });
  }
}</code>

Cette approche évite la détection de changements inutiles, améliorant ainsi 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!