Bagaimana untuk Melaksanakan Debouncing dalam Angular?

Menyahlantun dalam Sudut

Soalan:

Bagaimanakah nyahlantun boleh dilaksanakan dalam Sudut?

Jawapan:

Dalam Angular 2 , nyahlantun boleh dicapai menggunakan pengendali RxJS pada perubahan nilai kawalan borang. Contohnya:

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

Kod ini menyahpantun peristiwa ketukan kekunci dengan kelewatan 1000 milisaat.

Teknik Pengoptimuman:

Sementara pendekatan di atas adalah sah, ia boleh mencetuskan pengesanan perubahan tanpa perlu. Untuk kecekapan, pertimbangkan untuk mencipta RxJS Observables di luar zon pengesanan perubahan Angular dan memanggil ChangeDetectorRef.detectChanges() secara manual.

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

Pendekatan ini menghalang pengesanan perubahan yang tidak perlu, meningkatkan prestasi.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Debouncing dalam Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!