অ্যাঙ্গুলারজেএস-এ আপনি স্কোপ ভেরিয়েবলের $watch
ফাংশনটি ব্যবহার করে পরিবর্তনগুলি পর্যবেক্ষণ করতে নজরদারি নির্দিষ্ট করতে সক্ষম হন $scope
। কৌণিক ক্ষেত্রে পরিবর্তনশীল পরিবর্তনগুলি (উদাহরণস্বরূপ, উপাদান ভেরিয়েবল) দেখার সমতুল্য কী?
অ্যাঙ্গুলারজেএস-এ আপনি স্কোপ ভেরিয়েবলের $watch
ফাংশনটি ব্যবহার করে পরিবর্তনগুলি পর্যবেক্ষণ করতে নজরদারি নির্দিষ্ট করতে সক্ষম হন $scope
। কৌণিক ক্ষেত্রে পরিবর্তনশীল পরিবর্তনগুলি (উদাহরণস্বরূপ, উপাদান ভেরিয়েবল) দেখার সমতুল্য কী?
উত্তর:
কৌণিক 2 এ, পরিবর্তন সনাক্তকরণ হ'ল স্বয়ংক্রিয় ... $scope.$watch()
এবং $scope.$digest()
আরআইপি
দুর্ভাগ্যক্রমে, দেব গাইডের পরিবর্তন সনাক্তকরণ বিভাগটি এখনও লিখিত হয়নি ( "অন্যান্য অন্যান্য জিনিস" বিভাগে আর্কিটেকচার ওভারভিউ পৃষ্ঠার নীচে একটি স্থানধারক রয়েছে ))।
পরিবর্তন সনাক্তকরণ কীভাবে কাজ করে তা সম্পর্কে আমার বোঝার জন্য এখানে:
setTimeout()
আমাদের উপাদানগুলির অভ্যন্তরে কিছু ব্যবহার করার পরিবর্তে ব্যবহার করতে পারি $timeout
... কারণ setTimeout()
বানর প্যাচ করা।ChangeDetectorRef
)) কৌণিক উপাদান তৈরি করার সময় এই পরিবর্তনগুলি সনাক্তকারী তৈরি করা হয়। নোংরা চেক করার জন্য তারা আপনার সমস্ত বাইন্ডিংয়ের স্থিতির খোঁজ রাখে। এগুলি, এক অর্থে, স্বয়ংক্রিয়ভাবে সমান $watches()
যা অ্যাঙ্গুলার 1 {{}}
টেম্পলেট বাইন্ডিংয়ের জন্য সেট আপ করে । onPush
আপনার কোনও উপাদানতে পরিবর্তন সনাক্তকরণ কৌশলটি ব্যবহার না করেন ), গাছের প্রতিটি উপাদান একবার পরীক্ষা করা হয় (টিটিএল = 1) ... উপরে থেকে, গভীরতা-প্রথম ক্রমে order (ভাল, আপনি যদি ডিভ মোডে থাকেন তবে পরিবর্তন সনাক্তকরণটি দু'বার চলে (টিটিএল = 2) aboutএ সম্পর্কে আরও তথ্যের জন্য অ্যাপ্লিকেশন শ্যাফ.টিক () দেখুন ) ) এই পরিবর্তনগুলি সনাক্তকারী বস্তুগুলি ব্যবহার করে আপনার সমস্ত বাইন্ডিংয়ের উপর নোংরা চেকিং সম্পাদন করে।
ngOnChanges()
পরিবর্তনগুলি সম্পর্কে অবহিত হওয়ার জন্য প্রয়োগ করতে পারেন । ngDoCheck()
(আরও এই তথ্যের জন্য উত্তর দেখুন দেখুন) ইহার উপর). আরও জানার জন্য অন্যান্য উল্লেখ:
onPush
।host
"হোস্ট শ্রোতা" ডকুমেন্টেশন দেখুন । এটি অ্যাঙ্গুলার জোনের অভ্যন্তর থেকে কীভাবে বিশ্বব্যাপী ইভেন্টগুলি শুনতে হবে তা ব্যাখ্যা করে (সুতরাং পরিবর্তন সনাক্তকরণকে পছন্দসই হিসাবে ট্রিগার করা হবে)। এই উত্তরে একটি কার্যনির্বাহী লোক রয়েছে।
এই আচরণটি এখন উপাদান চক্রের অংশ।
ইনপুট পরিবর্তনগুলিতে অ্যাক্সেস পাওয়ার জন্য কোনও উপাদান অনকেনজেস ইন্টারফেসে ngOnChanges পদ্ধতিটি প্রয়োগ করতে পারে।
উদাহরণ:
import {Component, Input, OnChanges} from 'angular2/core';
@Component({
selector: 'hero-comp',
templateUrl: 'app/components/hero-comp/hero-comp.html',
styleUrls: ['app/components/hero-comp/hero-comp.css'],
providers: [],
directives: [],
pipes: [],
inputs:['hero', 'real']
})
export class HeroComp implements OnChanges{
@Input() hero:Hero;
@Input() real:string;
constructor() {
}
ngOnChanges(changes) {
console.log(changes);
}
}
যদি, স্বয়ংক্রিয় দ্বিমুখী বাইন্ডিং ছাড়াও, কোনও মান পরিবর্তিত হয়ে আপনি কোনও ফাংশনটিতে কল করতে চান, আপনি দ্বি-মুখী বাইন্ডিং শর্টকাট বাক্য গঠনটিকে আরও ভার্জোজ সংস্করণে ভেঙে ফেলতে পারেন।
<input [(ngModel)]="yourVar"></input>
সংক্ষিপ্ত
<input [ngModel]="yourVar" (ngModelChange)="yourVar=$event"></input>
(উদাহরণস্বরূপ http://victorsavkin.com/post/119943127151/angular-2-template-syntax )
আপনি এরকম কিছু করতে পারেন:
<input [(ngModel)]="yourVar" (ngModelChange)="changedExtraHandler($event)"></input>
আপনি কৌণিক 2 এ ঘড়ি হিসাবে ব্যবহার করতে getter function
বা ব্যবহার করতে পারেন get accessor
।
এখানে ডেমো দেখুন ।
import {Component} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
template: `
<button (click)="OnPushArray1()">Push 1</button>
<div>
I'm array 1 {{ array1 | json }}
</div>
<button (click)="OnPushArray2()">Push 2</button>
<div>
I'm array 2 {{ array2 | json }}
</div>
I'm concatenated {{ concatenatedArray | json }}
<div>
I'm length of two arrays {{ arrayLength | json }}
</div>`
})
export class HelloWorld {
array1: any[] = [];
array2: any[] = [];
get concatenatedArray(): any[] {
return this.array1.concat(this.array2);
}
get arrayLength(): number {
return this.concatenatedArray.length;
}
OnPushArray1() {
this.array1.push(this.array1.length);
}
OnPushArray2() {
this.array2.push(this.array2.length);
}
}
এখানে মডেলটির জন্য গেটর এবং সেটার ফাংশনগুলি ব্যবহার করে অন্য একটি পদ্ধতি রয়েছে।
@Component({
selector: 'input-language',
template: `
…
<input
type="text"
placeholder="Language"
[(ngModel)]="query"
/>
`,
})
export class InputLanguageComponent {
set query(value) {
this._query = value;
console.log('query set to :', value)
}
get query() {
return this._query;
}
}
(change)
তাদের প্রত্যেককেই হ্যান্ডলার যুক্ত করতে চাই না ; আমি get|sets
আমার মডেলের প্রতিটি সম্পত্তিতে এস যুক্ত করতে চাই না ; এটি একটি যোগ করার জন্য সাহায্য করবে না get|set
জন্য this.object
; ngOnChanges()
শুধুমাত্র @Input
গুলি পরিবর্তনগুলি সনাক্ত করে । পবিত্র মান্না! তারা আমাদের কী করেছে ??? আমাদেরকে একরকম গভীর নজরদারি দিন!
আপনি যদি এটি 2 উপায় বাঁধাই করতে চান [(yourVar)]
তবে আপনি ব্যবহার করতে পারেন তবে আপনাকে প্রয়োগ করতে হবেyourVarChange
ইভেন্টটি হবে এবং প্রতিবার আপনার পরিবর্তনশীল পরিবর্তনটি এটিকে কল করতে হবে।
নায়কের পরিবর্তনকে ট্র্যাক করতে এরকম কিছু
@Output() heroChange = new EventEmitter();
এবং তারপরে আপনার নায়কটি পরিবর্তিত হয়ে গেলে কল করুন this.heroChange.emit(this.hero);
দ্য [(hero)]
আপনার জন্য বাকি কাজগুলি করে দেবে বাঁধাই
এখানে উদাহরণ দেখুন:
এই ব্যবহার করে দেখুন যখন আপনার আবেদন এখনও দাবি $parse
, $eval
,$watch
কৌণিক মধ্যে আচরণ মত
এটি সরাসরি প্রশ্নের উত্তর দেয় না, তবে আমি বিভিন্ন সময়ে এই স্ট্যাক ওভারফ্লো প্রশ্নটিতে অবতীর্ণ হলাম যাতে আমি যে কোনও কিছু ব্যবহার করব solve কৌণিক জেজে দেখুন $ আমি বর্তমান জবাবগুলিতে বর্ণিত চেয়ে অন্য পদ্ধতির সাহায্যে শেষ করেছি, এবং কেউ যদি এটির কাজে লাগে সে ক্ষেত্রে এটি ভাগ করতে চাই।
অনুরূপ কিছু অর্জনের জন্য আমি যে কৌশলটি ব্যবহার করি $watch
তা হ'ল একটি কৌণিক পরিষেবাতে BehaviorSubject
( আরও একটি বিষয় এখানে ) ব্যবহার করা , এবং আমার উপাদানগুলি পরিবর্তনগুলি পেতে (দেখুন) যাতে এটিতে সাবস্ক্রাইব করতে দেয়। এটি $watch
কৌণিক জেজে অনুরূপ , তবে আরও কিছু সেটআপ এবং বোঝার প্রয়োজন।
আমার উপাদানগুলিতে:
export class HelloComponent {
name: string;
// inject our service, which holds the object we want to watch.
constructor(private helloService: HelloService){
// Here I am "watching" for changes by subscribing
this.helloService.getGreeting().subscribe( greeting => {
this.name = greeting.value;
});
}
}
আমার সেবায়
export class HelloService {
private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
constructor(){}
// similar to using $watch, in order to get updates of our object
getGreeting(): Observable<{value:string}> {
return this.helloSubject;
}
// Each time this method is called, each subscriber will receive the updated greeting.
setGreeting(greeting: string) {
this.helloSubject.next({value: greeting});
}
}
স্ট্যাকব্লিটজে একটি ডেমো এখানে