कैसे पता लगाएं कि कौन सी async कार्रवाई ngZone को ट्रिगर करती है (जो कि परिवर्तन का पता लगाने के लिए नेतृत्व करती है)?

Question

अपडेट के स्टैक ट्रेस में कोई भी परिवर्तन हमेशा वापस होता है globalZoneAwareCallback। आपको यह कैसे पता चलेगा कि परिवर्तन किसने शुरू किया?

डिबगिंग के संदर्भ में एक स्पष्ट तस्वीर होना अच्छा है।

Comments

समझाने की परवाह?

— user2167582

आपका प्रश्न पूरी तरह अस्पष्ट है!

— नीमरेशम

@nimeresam ऐसा कैसे? इसके सामान्य मैं सहमत हूँ, लेकिन अस्पष्ट?

— user2167582

मैंने सवाल अपडेट किया है, आशा है कि यह आपकी मदद करेगा

— Stepan Suvorov

Answer 1

globalZoneAwareCallbackके साथ सभी कॉलबैक से निपटने के लिए ज़ोन में घोषित एक समारोह है capture=false। (btw, capture=trueवहाँ के लिए है globalZoneAwareCaptureCallback)

इसका अर्थ है कि कोई भी श्रोता सबसे पहले इस पद्धति से गुजरेगा। उस श्रोता को आपके या किसी तीसरे पक्ष के पुस्तकालय के द्वारा कोणीय द्वारा पृष्ठ पर जोड़ा जा सकता है।

हम कोणीय में ब्राउज़र की घटनाओं को कैसे सुन सकते हैं, इसके कई तरीके हैं:

• ब्राउज़र इवेंट की सदस्यता लें <element (event)="callback()">

• @HostListener डेकोरेटर @HostListener('event') callback() {}

• Renderer2.listen तरीका

• rxjs fromEvent

• तत्व संपत्ति असाइन करें element.on<event> = callback

• addEventListener विधि element.addEventListener(event, callback)(इस विधि का उपयोग आंतरिक रूप से ऊपर कई अन्य तरीकों से किया जाता है)

एक बार जब आप भीतर हो जाते globalZoneAwareCallbackहैं तो आपके पास सभी ज़ोन कार्यों तक पहुंच होती है जिन्हें ट्रिगर किया जाना चाहिए।

आइए कल्पना करें कि हम इस clickघटना को सुनते हैं document.body:

document.body.addEventListener('click', () => {
   // some code
});

स्पष्ट चित्र रखने के लिए Chrome देव टूल खोलें:

जो हमने अभी खोजा है:

• प्रत्येक ज़ोन कार्य में स्रोत होता है इसलिए यह परिवर्तन को ट्रिगर करता है

• लक्ष्य संपत्ति दिखाती है कि कौन सी वस्तु परिवर्तन को ट्रिगर करती है

• कॉलबैक संपत्ति हमें परिवर्तन के हैंडलर तक ले जा सकती है

आइए एक और उदाहरण पर विचार करें और कोणीय तरीके का उपयोग करके क्लिक इवेंट जोड़ें:

<h2 class="title" (click)="test()">Hello {{name}}</h2>

एक बार जब हम उस h2तत्व पर क्लिक करते हैं, तो हमें निम्नलिखित का पालन करना चाहिए:

आपको आश्चर्य हो सकता है कि अब कॉलबैक प्रॉपर्टी ने हमें testतुरंत कॉलबैक में नहीं लाया , बल्कि हमने कुछ रैपर दिखाए @angular/platform-browser package। और अन्य मामले भी भिन्न हो सकते हैं, लेकिन जोनटस्क.सोर्स प्रॉपर्टी आमतौर पर उन मामलों में आपकी आवश्यकता होती है क्योंकि यह आपको परिवर्तन का मूल कारण दिखाता है ।

Comments

धन्यवाद सर, यह एक बढ़िया जवाब था कि काश मैं इस इनाम को दोगुना कर सकूं।

— user2167582