Bagaimana untuk Debounce Input Pengguna dalam Angular Menggunakan RxJS?

Menyahlantun dengan Angular 2

AngularJS menawarkan cara yang mudah untuk menyahpantulkan model menggunakan arahan pilihan-model-ng. Walau bagaimanapun, dengan Angular, tiada cara terbina dalam untuk mencapai fungsi ini.

Menyahlantun dengan RxJS

Angular memanfaatkan RxJS untuk pengaturcaraan reaktif, menyediakan cara untuk mencipta pemerhatian yang boleh digunakan untuk pengendalian acara, strim data dan banyak lagi. RxJS menyediakan pengendali debounceTime(), yang mengeluarkan nilai hanya selepas tempoh tertentu telah berlalu sejak pelepasan terbaharu.

Contoh Menggunakan RxJS DebounceTime

Untuk melaksanakan nyahlantun dalam Sudut, ikut langkah berikut:

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

Kod ini menggunakan debounceTime(1000) untuk melambatkan pancaran nilai baharu sebanyak 1000 milisaat. Sebarang ketukan kekunci yang berlaku dalam tempoh itu tidak akan mencetuskan kemas kini segera sifat firstName.

Pertimbangan Prestasi

Menyahlantun menggunakan RxJS observables adalah cekap, kerana ia tidak mencetuskan tukar pengesanan melainkan tempoh nyahlantun tamat. Walau bagaimanapun, pertimbangkan untuk mencipta pemerhatian di luar zon Angular menggunakan NgZone.runOutsideAngular(), kerana ini boleh meningkatkan lagi prestasi.

Atas ialah kandungan terperinci Bagaimana untuk Debounce Input Pengguna dalam Angular Menggunakan RxJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!