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

Salin selepas log masuk

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.ngZone.runOutsideAngular(() => {
    this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
        ...
    this.resizeSub = Observable.fromEvent(window, 'resize')
        ...
});

Salin selepas log masuk