angular - कोणीय में मैन्युअल रूप से परिवर्तन का पता लगाना
angular2-changedetection (4)
मैं एक कोणीय घटक लिख रहा हूं जिसमें एक संपत्ति
Mode(): string
।
मैं किसी भी घटना के जवाब में इस संपत्ति को प्रोग्रामेटिक रूप से सेट करने में सक्षम होना चाहूंगा।
समस्या यह है कि एक ब्राउज़र ईवेंट के अभाव में, एक टेम्पलेट
{{Mode}}
बाइंडिंग अद्यतन नहीं करता है।
क्या मैन्युअल रूप से इस परिवर्तन का पता लगाने का एक तरीका है?
ChangeDetectorRef.detectChanges () - $ गुंजाइश के समान। $ डाइजेस्ट () - अर्थात, केवल इस घटक और उसके बच्चों की जाँच करें
इनमें से एक आज़माएँ:
-
ApplicationRef.tick()
- AngularJS के$rootScope.$digest()
के समान$rootScope.$digest()
- यानी, पूर्ण पेड़ के पेड़ की जाँच करें। -
NgZone.run(callback)
-$rootScope.$apply(callback)
समान$rootScope.$apply(callback)
- यानी, कोणीय क्षेत्र के अंदर कॉलबैक फ़ंक्शन का मूल्यांकन करें। मुझे लगता है, लेकिन मुझे यकीन नहीं है, कि यह कॉलबैक फ़ंक्शन को निष्पादित करने के बाद पूर्ण घटक ट्री की जाँच करता है। -
ChangeDetectorRef.detectChanges()
-$scope.$digest()
समान$scope.$digest()
- अर्थात, केवल इस घटक और उसके बच्चों की जाँच करें
आप
ApplicationRef
,
NgZone
, या
ChangeDetectorRef
को अपने घटक में
ChangeDetectorRef
कर सकते हैं।
मैंने स्वीकृत उत्तर संदर्भ का उपयोग किया और एक उदाहरण रखना चाहूंगा, क्योंकि कोणीय 2 प्रलेखन को पढ़ना बहुत कठिन है, मुझे आशा है कि यह आसान है:
-
आयात
NgZone
:import { Component, NgZone } from '@angular/core';
-
इसे अपने क्लास कंस्ट्रक्टर में जोड़ें
constructor(public zone: NgZone, ...args){}
-
zone.run
के साथ कोड चलाएँ:this.zone.run(() => this.donations = donations)
कोणीय 2+ में, @Input डेकोरेटर आज़माएं
यह माता-पिता और बच्चे के घटकों के बीच कुछ अच्छी संपत्ति के लिए अनुमति देता है।
सबसे पहले माता-पिता को उस वस्तु / संपत्ति को रखने के लिए एक वैश्विक चर बनाएं जो बच्चे को पारित की जाएगी।
आगे माता-पिता से पारित वस्तु / संपत्ति को धारण करने के लिए बच्चे में एक वैश्विक चर पैदा करें।
फिर पैरेंट html में, जहाँ चाइल्ड टेम्प्लेट का उपयोग किया जाता है, चाइल्ड वेरिएबल के नाम के साथ स्क्वायर ब्रैकेट्स संकेतन जोड़ें, फिर इसे पैरेंट वेरिएबल के नाम के बराबर सेट करें। उदाहरण:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
अंत में, जहां चाइल्ड प्रॉपर्टी को चाइल्ड कंपोनेंट में परिभाषित किया गया है, इनपुट डेकोरेटर जोड़ें:
@Input()
public childVariable: any
जब आपका पैरेंट वैरिएबल अपडेट हो जाता है, तो उसे चाइल्ड कंपोनेंट को अपडेट पास करना चाहिए, जिससे उसका html अपडेट हो जाए।
इसके अलावा, बच्चे के घटक में एक फ़ंक्शन को ट्रिगर करने के लिए, ngOnChanges पर एक नज़र डालें।