कोणीय में मैन्युअल रूप से परिवर्तन का पता लगाना

387

मैं एक कोणीय घटक लिख रहा हूं जिसके पास एक संपत्ति है Mode(): string।

मैं किसी भी घटना के जवाब में प्रोग्रामेटिक रूप से इस प्रॉपर्टी को सेट करने में सक्षम होना चाहूंगा।

समस्या यह है कि एक ब्राउज़र इवेंट की अनुपस्थिति में, एक टेम्प्लेट बाइंडिंग {{Mode}}अपडेट नहीं करता है।

क्या मैन्युअल रूप से इस परिवर्तन का पता लगाने का एक तरीका है?

angular angular2-changedetection

— jz87
स्रोत

640

इनमें से एक आज़माएँ:

ApplicationRef.tick()- AngularJS की तरह $rootScope.$digest()- यानी, पूर्ण घटक पेड़ की जाँच करें
NgZone.run(callback)- के समान $rootScope.$apply(callback)- यानी, कोणीय क्षेत्र के अंदर कॉलबैक फ़ंक्शन का मूल्यांकन करें। मुझे लगता है, लेकिन मुझे यकीन नहीं है, कि यह कॉलबैक फ़ंक्शन को निष्पादित करने के बाद पूर्ण घटक ट्री की जाँच करता है।
ChangeDetectorRef.detectChanges()- के समान $scope.$digest()- यानी, केवल इस घटक और उसके बच्चों की जाँच करें

आप इंजेक्षन कर सकते हैं ApplicationRef, NgZoneया ChangeDetectorRefअपने घटक में।

— राज रजोक
स्रोत

1

धन्यवाद, मैंने 3 जी समाधान का विकल्प चुना ताकि सब कुछ जांच न हो, क्योंकि परिवर्तन काफी स्थानीय हैं। जब मेरे पास अधिक समय हो तो मुझे अन्य विकल्पों की जांच करनी चाहिए। क्या प्रत्येक पसंद के साथ कोई प्रदर्शन निहितार्थ हैं?

— jz87

36

के लिए +1 ChangeDetectorRef.detectChanges()। मेरे निर्देशन से इनपुट के मान को अद्यतन करने से पहले सत्यापनकर्ता फायरिंग कर रहे थे।

— ps2goat

7

ApplicationRef.tick () और ChangeDetectorRef.detectChanges () अभी भी 2.0.0 फाइनल में मौजूद हैं।

— मैक्स ममफोर्ड

51

बस मैंने सोचा था कि मैं इसका उल्लेख करूंगा। ये स्थैतिक विधियाँ नहीं हैं, वे उदाहरण विधियाँ हैं। आपको इन वर्गों को सेवाओं के रूप में इंजेक्ट करने की आवश्यकता है।

— स्टीफन पॉल

1

ApplicationRef.tick () ने FireFox v17 (<20)

— Dan J

123

मैंने स्वीकृत उत्तर संदर्भ का उपयोग किया और एक उदाहरण रखना चाहूंगा, क्योंकि कोणीय 2 प्रलेखन को पढ़ना बहुत कठिन है, मुझे आशा है कि यह आसान है:

आयात NgZone:

import { Component, NgZone } from '@angular/core';

इसे अपने क्लास कंस्ट्रक्टर में जोड़ें
```
constructor(public zone: NgZone, ...args){}
```
इसके साथ कोड चलाएँ zone.run:
```
this.zone.run(() => this.donations = donations)
```

— साइटों
स्रोत

6

आपको zone.runकोड कहां रखना चाहिए और वास्तव में क्या है donations?

— सकु

@suku दान कोई भी संपत्ति है जिसे आप अपडेट करना चाहते हैं, इसलिए यह यह हो सकता है। Foo = bar। ज़ोन.run जाता है जहाँ भी आप सामान अपडेट करना चाहते हैं।

— मैथ्यू वैकल्पिक मेहान

4

मैंने इस समाधान का उपयोग दस्तावेज़

— .addEventListener

71

मैं इसे markForCheck () के साथ अपडेट करने में सक्षम था

ChangeDetectorRef आयात करें

import { ChangeDetectorRef } from '@angular/core';

इसे इंजेक्ट करें और त्वरित करें

constructor(private ref: ChangeDetectorRef) { 
}

अंत में जगह लेने के लिए परिवर्तन का पता लगाएं

this.ref.markForCheck();

यहाँ एक उदाहरण है जहाँ markForCheck () काम करता है और पता लगाता है () नहीं।

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

संपादित करें: यह उदाहरण अब समस्या का चित्रण नहीं करता है :( मेरा मानना है कि यह एक नया कोणीय संस्करण चला सकता है जहां यह तय हो गया है।

(इसे फिर से चलाने के लिए STOP / RUN दबाएं)

— नूनो टॉमस
स्रोत

पता लगाने के लिए Goo बिंदु () काम नहीं कर रहा है। मैंने एक ही मुद्दे पर ध्यान दिया था और पाया कि यह काम करता है यदि परिवर्तन का पता नहीं है तो ऑनपश। उसके लिए स्पष्टीकरण प्राप्त करना अच्छा होगा ...

— क्रिश्चियन

2

ऐसा लगता है कि पता लगाना वास्तव में इस प्लंकर में काम कर रहा है? क्या मैं कुछ भूल रहा हूँ?

— जारेड_सी।

1

आपको ध्यान देना चाहिए कि ChangeDetectorRef केवल कंपोनेंट्स में काम करता है

— kevinius

(!) यह एक बुरा उदाहरण है, मुझे क्षमा करें। उदाहरण से कुछ दिखाई नहीं देता। पहला आइटम सिर्फ अधिलेखित हो जाता है। बस टाइमर्स को थोड़ा एडजस्ट करें ...

— पीटर स्टेनगनर

यह उदाहरण अब समस्या को चित्रित नहीं करता है :( मेरा मानना है कि यह एक नया कोणीय संस्करण चल सकता है जहां यह तय हो गया है।

— नूनो टॉमस

7

कोणीय 2+ में, @Input डेकोरेटर आज़माएं

यह माता-पिता और बच्चे के घटकों के बीच कुछ अच्छी संपत्ति के लिए अनुमति देता है।

सबसे पहले माता-पिता को उस वस्तु / संपत्ति को रखने के लिए एक वैश्विक चर बनाएं जो बच्चे को पारित की जाएगी।

आगे माता-पिता से पारित वस्तु / संपत्ति को धारण करने के लिए बच्चे में एक वैश्विक चर पैदा करें।

फिर पैरेंट html में, जहाँ चाइल्ड टेम्प्लेट का उपयोग किया जाता है, चाइल्ड वेरिएबल के नाम के साथ स्क्वायर ब्रैकेट्स नोटेशन जोड़ें, फिर इसे पैरेंट वेरिएबल के नाम के बराबर सेट करें। उदाहरण:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

अंत में, जहां चाइल्ड प्रॉपर्टी को चाइल्ड कंपोनेंट में परिभाषित किया गया है, इनपुट डेकोरेटर जोड़ें:

@Input()
public childVariable: any

जब आपका पैरेंट वैरिएबल अपडेट हो जाता है, तो उसे चाइल्ड कंपोनेंट को अपडेट पास करना चाहिए, जिससे उसका html अपडेट हो जाए।

इसके अलावा, बच्चे के घटक में एक फ़ंक्शन को ट्रिगर करने के लिए, ngOnChanges पर एक नज़र डालें।

— जेरेमी स्वैगर
स्रोत

2

NO ... समस्या को हल करता है ... यदि आप माता-पिता में अपडेट करते हैं ... एक स्थैतिक विधि में "एग्ज़ाम्पल" के लिए कहते हैं, "स्टैटिक मेथड" में बच्चा इसे नहीं उठाता है क्योंकि बदलाव का पता नहीं चल पाया है

— Bhail

मुझे अब कई दिनों से यही समस्या है। मैं PHP बैकएंड से डेटा पुनर्प्राप्त करने का प्रयास करता हूं और डेटा बिल्कुल भी अपडेट नहीं होता है। Microsoft एज पर ठीक काम करता है लेकिन अन्य ब्राउज़र पर यह नहीं होता है। मैं डेटा प्राप्त करता रहता हूं जो मुझे पहली बार शुरू हुआ था लेकिन यदि डेटा बदलता है तो यह देखने पर अपडेट नहीं होता है

— el6976

1

ChangeDetectorRef.detectChanges () - $ गुंजाइश के समान। $ डाइजेस्ट () - अर्थात, केवल इस घटक और उसके बच्चों की जाँच करें

— Chetann
स्रोत