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>
<pre class="brush:php;toolbar:false">.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

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>
<pre class="brush:php;toolbar:false">.pipe(
    throttleTime(200)
)
.subscribe(e => {
    console.log('resize event', e);
    this.firstName += '*';  // change something to show it worked
});

Gestion efficace des événements

Les approches ci-dessus déclenchent le changement détection à chaque événement, même lorsqu'ils sont anti-rebond ou limités. Pour une gestion plus efficace des événements, envisagez de créer des observables RxJS en dehors de la zone d'Angular, en déclenchant manuellement la détection des modifications dans les méthodes de rappel d'abonnement.

<br>ngAfterViewInit() {</p>
<pre class="brush:php;toolbar:false">this.ngZone.runOutsideAngular(() => {
    this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
        ...
    this.resizeSub = Observable.fromEvent(window, 'resize')
        ...
});

>

En utilisant les opérateurs RxJS et le déclencheur proactif de détection des changements, vous pouvez gérer efficacement les événements d'entrée dans Angular 2, garantissant des interactions utilisateur fluides et réactives.

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!