আরসি 5 এর জন্য আপডেট হয়েছে
কৌণিক 2 এর সাহায্যে আমরা debounceTime()একটি ফর্ম নিয়ন্ত্রণের valueChangesপর্যবেক্ষণযোগ্যতে আরএক্সজেএস অপারেটরটি ব্যবহার করে আত্মপ্রকাশ করতে পারি :
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';
@Component({
selector: 'my-app',
template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
<br>{{firstName}}`
})
export class AppComponent {
firstName = 'Name';
firstNameControl = new FormControl();
formCtrlSub: Subscription;
resizeSub: Subscription;
ngOnInit() {
// debounce keystroke events
this.formCtrlSub = this.firstNameControl.valueChanges
.debounceTime(1000)
.subscribe(newValue => this.firstName = newValue);
// throttle resize events
this.resizeSub = Observable.fromEvent(window, 'resize')
.throttleTime(200)
.subscribe(e => {
console.log('resize event', e);
this.firstName += '*'; // change something to show it worked
});
}
ngDoCheck() { console.log('change detection'); }
ngOnDestroy() {
this.formCtrlSub.unsubscribe();
this.resizeSub .unsubscribe();
}
}
Plunker
উপরের কোডটিতে কীভাবে উইন্ডো রাইজিং ইভেন্টগুলি থ্রোটল করা যায় তার একটি উদাহরণ অন্তর্ভুক্ত রয়েছে, যেমন নীচে একটি মন্তব্যে @ অ্যালবানেক্স জিজ্ঞাসা করেছিলেন।
যদিও উপরের কোডটি সম্ভবত এটি করার কৌণিক উপায়, এটি কার্যকর নয়। প্রতিটি কী-স্ট্রোক এবং প্রতিটি আকার পরিবর্তনকারী ইভেন্ট, যদিও এগুলি উদ্বোধন করা হয় এবং থ্রোটলড হয়, এর ফলে পরিবর্তন সনাক্তকরণ চলমান হয়। অন্য কথায়, ডিবেউনিং এবং থ্রোটলিং কত সময় পরিবর্তন সনাক্ত করে তা চালায় না । (আমি একটি পাওয়া GitHub মন্তব্য যে এই নিশ্চিত করে Tobias বশ দ্বারা।) আপনি এটি দেখতে পারেন যখন আপনি plunker চালাতে এবং আপনি দেখতে কতবার ngDoCheck()যখন আপনি ইনপুট বাক্সে টাইপ করুন অথবা উইন্ডোতে মাপ পরিবর্তন নামক হচ্ছে। (পুনরায় আকারের ইভেন্টগুলি দেখতে পৃথক উইন্ডোতে প্লঙ্কার চালনার জন্য নীল "x" বোতামটি ব্যবহার করুন))
একটি আরও দক্ষ কৌশল হ'ল কৌনিকের "জোন" এর বাইরে, ইভেন্টগুলি থেকে নিজেকে আরএক্সজেএস পর্যবেক্ষণযোগ্য তৈরি করা। এইভাবে, পরিবর্তন সনাক্তকরণটিকে প্রতিবার কোনও ইভেন্টে আগুন বলা হয় না। তারপরে, আপনার সাবস্ক্রাইব কলব্যাক পদ্ধতিতে, পরিবর্তন সনাক্তকরণকে ম্যানুয়ালি ট্রিগার করে - যেমন, যখন পরিবর্তন সনাক্তকরণ বলা হয় আপনি নিয়ন্ত্রণ করেন:
import {Component, NgZone, ChangeDetectorRef, ApplicationRef,
ViewChild, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';
@Component({
selector: 'my-app',
template: `<input #input type=text [value]="firstName">
<br>{{firstName}}`
})
export class AppComponent {
firstName = 'Name';
keyupSub: Subscription;
resizeSub: Subscription;
@ViewChild('input') inputElRef: ElementRef;
constructor(private ngzone: NgZone, private cdref: ChangeDetectorRef,
private appref: ApplicationRef) {}
ngAfterViewInit() {
this.ngzone.runOutsideAngular( () => {
this.keyupSub = Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
.debounceTime(1000)
.subscribe(keyboardEvent => {
this.firstName = keyboardEvent.target.value;
this.cdref.detectChanges();
});
this.resizeSub = Observable.fromEvent(window, 'resize')
.throttleTime(200)
.subscribe(e => {
console.log('resize event', e);
this.firstName += '*'; // change something to show it worked
this.cdref.detectChanges();
});
});
}
ngDoCheck() { console.log('cd'); }
ngOnDestroy() {
this.keyupSub .unsubscribe();
this.resizeSub.unsubscribe();
}
}
Plunker
এটি সংজ্ঞায়িত হয়েছে তা নিশ্চিত করার ngAfterViewInit()পরিবর্তে আমি ব্যবহার করি ।ngOnInit()inputElRef
detectChanges()এই উপাদান এবং এর শিশুদের জন্য পরিবর্তন সনাক্তকরণ চালাবে। আপনি যদি এর পরিবর্তে মূল উপাদান থেকে পরিবর্তন সনাক্তকরণ চালাতে চান (যেমন, একটি সম্পূর্ণ পরিবর্তন সনাক্তকরণ চেক চালান) তবে তার ApplicationRef.tick()পরিবর্তে ব্যবহার করুন। (আমি ApplicationRef.tick()প্লাঙ্কারের মন্তব্যে একটি কল দিয়েছি)) নোট করুন যে কলিং কল করার tick()কারণ হবে ngDoCheck()।
