Bagaimana untuk Mengurus Peristiwa Input dengan Berkesan dalam Angular 2 Menggunakan RxJS?

Mengurus Peristiwa Input dalam Angular 2

Dalam AngularJS, pembangun boleh menggunakan arahan ng-model-options untuk menyahpantun kemas kini model input. Dalam Angular 2 , kefungsian serupa tersedia melalui penggunaan operator RxJS.

Menyahlantun dengan RxJS

Untuk nyahlantun model dalam Angular 2 , manfaatkan masa debounce() operator pada nilai kawalan borang yang boleh diperhatikan. Pengendali ini menangguhkan pelepasan nilai seterusnya sehingga masa yang ditentukan berlalu selepas peristiwa terakhir.

import { debounceTime } daripada 'rxjs/operators';

formCtrlSub = this. firstNameControl.valueChanges

.pipe(
    debounceTime(1000)
)
.subscribe(newValue => this.firstName = newValue);

Acara Pendikit

Anda juga boleh mendikit acara, seperti mengubah saiz acara, untuk mengelakkan kemas kini yang berlebihan. Pengendali throttleTime() memastikan bahawa hanya satu nilai dipancarkan dalam tetingkap masa yang ditentukan.

<br>import { throttleTime } daripada 'rxjs/operators';</p>
<p>resizeSub = Observable.fromEvent(tetingkap, 'ubah saiz')</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
});

Pengendalian Acara yang Cekap

Pendekatan di atas mencetuskan perubahan pengesanan pada setiap acara, walaupun apabila ia dinyahlantunkan atau pendikit. Untuk pengendalian acara yang lebih cekap, pertimbangkan untuk mencipta RxJS Observables di luar zon Angular, mencetuskan pengesanan perubahan secara manual dalam kaedah panggil balik langgan.

<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')
        ...
});

}

Dengan menggunakan pengendali RxJS dan pencetus pengesanan perubahan proaktif, anda boleh mengurus peristiwa input dengan berkesan dalam Angular 2 , memastikan interaksi pengguna yang lancar dan responsif.

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