Comment implémenter l'anti-rebond dans Angular ?-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-10-23 12:35:30

original

1070 Les gens l'ont consulté

How to Implement Debouncing in 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>

Copier après la connexion

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>

Copier après la connexion

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!