कोणीय 2 - बाहरी जेएस पुस्तकालयों के साथ टाइपस्क्रिप्ट कार्यों का संचार

Question

ग्राफ और पेड़ खींचने के लिए बाहरी पुस्तकालय के रूप में Javascript Infovis Toolkit का उपयोग करना। मुझे सर्वर पर HTTP GET अनुरोध को अतुल्यकालिक रूप से भेजने के लिए नोड्स की ऑनक्लिक विधि में हेरफेर करने की आवश्यकता है और सर्वर से आने वाले डेटा को एक कोणीय सेवा वर्ग के गुणों और चरों को असाइन करना है। सभी संकलित टाइपस्क्रिप्ट को एक जेएस फ़ाइल में पैक करने के लिए वेबपैक का उपयोग करके, आउटपुट फ़ाइल भ्रमित और अपठनीय है। इसलिए बाहरी जेएस लाइब्रेरी से संकलित जेएस फ़ाइल में एक फ़ंक्शन को कॉल करना, स्पष्ट रूप से सबसे अच्छा समाधान नहीं है।

मैं अपने कोणीय सेवा के अंदर निम्नलिखित समाधान की कोशिश तो मैं किसी भी मुसीबत के बिना इस सेवा के गुणों को एक्सेस कर सकते हैं:

document.addEventListener('DOMContentLoaded', function() { 
 
    
 
    var nodes = document.querySelectorAll(".nodes"); // nodes = [] 
 
    
 
    for (var i = 0; i < nodes.length; i++) { // nodes.length = 0 
 
    
 
    nodes[i].addEventListener("click", function() { 
 
     
 
     // asynchronously sending GET request to the server 
 
     // and assing receiving data to the properties of this Angular service 
 
     
 
    }); 
 
    } 
 

 
});

हालांकि, इस समाधान क्योंकि में काम नहीं करता जावास्क्रिप्ट इन्फोविस टूलकिट नोड्स को डीओएम के प्रतिपादन को खत्म करने के बाद और window.onload ईवेंट के बाद तैयार किए जाते हैं। इस लाइब्रेरी में कुछ लाइफसाइकिल विधियां हैं जैसे ऑनफॉर कॉम्प्यूट() जिसे पेड़ ड्राइंग के बाद बुलाया जाता है। कोणीय सेवा को सूचित करने के लिए मैं वैश्विक घटना कैसे ट्रिगर कर सकता हूं कि पेड़ का चित्र पूरा हो गया है और यह सभी नोड्स से पूछताछ कर सकता है?

Answer 1

dispatchEvent का उपयोग कर एक कस्टम ईवेंट को आग लगाएं।

कोणीय में आप किसी भी घटक है कि वास्तव में डोम में जोड़ा जाता है में शामिल करके सुन सकते हैं: किसी भी टेम्पलेट में

• :

<div (window:custom-event)="updateNodes($event)"> 

• या घटकों कक्षा में :

@HostListener('window:custom-event', ['$event']) 
updateNodes(event) { 
    ... 
} 

• या @Component() या @Directive() एनोटेशन में:

@Component({ 
    selector: '...', 
    host: {'(window:custom-event)':'updateNodes($event)'} 
}) 

जहां custom-event भेजा घटना के प्रकार और updateNodes(event) अपने घटकों कक्षा में एक विधि है।

मैन्युअल जावास्क्रिप्ट में यह गति प्रदान करने के लिए:

window.dispatchEvent(new Event('custom-event')); 

एक वैकल्पिक दृष्टिकोण

(या निर्देशों, सेवाओं) घटकों के तरीकों बनाने के लिए किया जाएगा उपलब्ध बाहर कोणीय तरह Angular2 - how to call component function from outside the app में विस्तार से बताया।