AngularJS में आप देखने वालों को $watch
फ़ंक्शन के उपयोग से कार्यक्षेत्र चर में परिवर्तन देखने के लिए निर्दिष्ट करने में सक्षम थे $scope
। कोणीय परिवर्तन (उदाहरण के लिए, घटक चर) में परिवर्तन के लिए देखने के बराबर क्या है?
AngularJS में आप देखने वालों को $watch
फ़ंक्शन के उपयोग से कार्यक्षेत्र चर में परिवर्तन देखने के लिए निर्दिष्ट करने में सक्षम थे $scope
। कोणीय परिवर्तन (उदाहरण के लिए, घटक चर) में परिवर्तन के लिए देखने के बराबर क्या है?
जवाबों:
कोणीय 2 में, परिवर्तन का पता लगाना स्वचालित है ... $scope.$watch()
और $scope.$digest()
RIP
दुर्भाग्य से, देव गाइड के चेंज डिटेक्शन सेक्शन को अभी तक नहीं लिखा गया है ( "द अदर स्टफ" सेक्शन में आर्किटेक्चर ओवरव्यू पेज के नीचे एक प्लेसहोल्डर है )।
यह पता लगाने की मेरी समझ है कि परिवर्तन कैसे काम करता है:
setTimeout()
अपने घटकों के अंदर का उपयोग कर सकते हैं जैसे $timeout
कि कुछ ... क्योंकि setTimeout()
बंदर पैच है।ChangeDetectorRef
।) ये परिवर्तन डिटेक्टर तब बनाए जाते हैं जब कोणीय घटक बनाते हैं। वे गंदे चेकिंग के लिए आपकी सभी बाइंडिंग की स्थिति पर नज़र रखते हैं। ये एक अर्थ में, ऑटोमैटिक के समान हैं $watches()
जो कोणीय 1 {{}}
टेम्पलेट बाइंडिंग के लिए स्थापित होंगे । onPush
अपने किसी भी घटक पर परिवर्तन का पता लगाने की रणनीति का उपयोग नहीं कर रहे हैं ), तो पेड़ के हर घटक की एक बार (TTL = 1) ... गहराई से, पहले क्रम में जांच की जाती है। (ठीक है, यदि आप देव मोड में हैं, तो परिवर्तन का पता लगाने दो बार (TTL = 2) चलता है। ApplicationRef.tick () इस बारे में अधिक जानकारी के लिए देखें ।) यह उन सभी डिटेक्टरों का उपयोग करके आपके सभी बाइंडिंग पर गंदी जाँच करता है।
ngOnChanges()
परिवर्तनों के बारे में सूचित किए जाने के लिए कार्यान्वित कर सकते हैं। ngDoCheck()
( इस SO उत्तर को और देखें) इस पर)। अधिक जानने के लिए अन्य संदर्भ:
onPush
।host
में "होस्ट श्रोताओं" के दस्तावेज़ देखें । यह बताता है कि कोणीय क्षेत्र के अंदर से वैश्विक घटनाओं को कैसे सुनना है (इसलिए वांछित के रूप में परिवर्तन का पता लगाया जाएगा)। इस उत्तर में एक काम करने वाला प्लंकर है।
यह व्यवहार अब घटक जीवन चक्र का हिस्सा है।
एक घटक इनपुट परिवर्तनों की पहुँच प्राप्त करने के लिए OnChanges इंटरफ़ेस में 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-satstat )
आप ऐसा कुछ कर सकते हैं:
<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
अपने मॉडल में प्रत्येक संपत्ति में s जोड़ना नहीं चाहता ; यह एक जोड़ने के get|set
लिए मदद नहीं करेगा this.object
; ngOnChanges()
केवल @Input
एस में परिवर्तन का पता लगाता है । पवित्र मन्ना! उन्होंने हमारा क्या किया ??? हमें किसी तरह की गहरी घड़ी वापस दें!
यदि आप इसे 2 तरह से बाध्यकारी बनाना चाहते हैं, तो आप उपयोग कर सकते हैं [(yourVar)]
, लेकिन आपको yourVarChange
ईवेंट को कार्यान्वित करना होगा और इसे हर बार आपके परिवर्तनशील परिवर्तन को कॉल करना होगा।
नायक परिवर्तन को ट्रैक करने के लिए कुछ इस तरह
@Output() heroChange = new EventEmitter();
और फिर जब आपका हीरो बदल जाए, तो कॉल करें this.heroChange.emit(this.hero);
[(hero)]
आप के लिए आराम करेंगे बाध्यकारी
यहाँ उदाहरण देखें:
इस प्रयास करें जब आपके आवेदन अभी भी मांग है $parse
, $eval
, $watch
कोणीय में व्यवहार की तरह
यह सीधे प्रश्न का उत्तर नहीं देता है, लेकिन मैं कुछ अलग-अलग अवसरों पर इस स्टैक ओवरफ्लो प्रश्न पर उतरा हूं ताकि कुछ को हल करने के लिए मैं कोणीयज में $ घड़ी का उपयोग कर सकूं। मैंने वर्तमान उत्तरों में वर्णित की तुलना में एक और दृष्टिकोण का उपयोग करके समाप्त कर दिया है, और यदि कोई इसे उपयोगी पाता है तो मैं इसे साझा करना चाहता हूं।
जिस तकनीक का मैं कुछ समान हासिल करने के लिए उपयोग करता हूं $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});
}
}
यहाँ Stackblitz पर एक डेमो है