2015-11-19 19 views
7

से घटक प्राप्त करें यह पहले से ही उत्तर दिया गया है कि एक कोणीय 2 घटक से DOM तत्व कैसे प्राप्त करें: ComponentRef.location.nativeElement (ComponentRef.location ElementRef देता है जो डीओएम तक सीधी पहुंच प्रदान करता है)।डीओएम तत्व

लेकिन विपरीत कैसे करें, यानी कंपोनेंट रिफ का संदर्भ प्राप्त करें जब मेरे पास केवल मूल DOM ऑब्जेक्ट हो?

मैं इस मामले में हूं जब मैं interact.js का उपयोग करके कोणीय 2 घटकों को खींच/छोड़ने का प्रयास करता हूं। पुस्तकालय कॉलबैक फ़ंक्शंस का उपयोग करता है यह सूचित करने के लिए कि कौन सा तत्व खींचा गया है, और किस तत्व पर हम ड्रॉप करने का प्रयास कर रहे हैं। एक event ऑब्जेक्ट प्रदान किया गया है, और मुझे मिली एकमात्र उपयोगी जानकारी डीओएम तत्व (target विशेषता) थी।

उदाहरण:

interact('my-component-tag').draggable({ 
    // ... 
    onstart: function (event:any) { 
     var dom = event.target; // ref to the <my-component-tag> tag 
     // How to find the Angular ComponentRef object here? 
    } 
    // ... 
}).dropzone({ 
    // ... 
    ondragenter: function (event:any) { 
     var targetDom = event.relatedTarget; // targeted <my-component-tag> tag 
     // Same question here, 
     // to identify where we want to insert the dragged element. 
    } 
    // ... 
}); 

Plunker here

आप src/Interactjs.ts में संचालकों देख सकते हैं। संबंधित लॉग देखने के लिए कंसोल खोलें और किसी घटक को दूसरे पर छोड़ दें। मेरे पास डीओएम द्वारा तत्वों के बारे में जानकारी है, लेकिन मुझे इसके बजाय कोणीय घटक चाहिए, मान लें कि count विशेषता का उपयोग करें।

निष्कर्ष और कोशिश करता:

मैं एक solution for the jquery-ui-draggable plugin मिला, लेकिन इस चाल यहाँ काम नहीं करता, कम से कम लक्ष्य जहां ड्रॉप करने के लिए।

डोम में डालने के बारे में topics भी है, डोम एडाप्टर के बारे में बात करते हुए, लेकिन मुझे कोई विधि नहीं मिली है जो डीओएम से कोणीय घटक संदर्भ में मदद करने के लिए प्रतीत होता है।

मैं बस अपना घटकों के साथ मैन्युअल खोज के बारे में सोचा: डोम नोड्स में पाशन, स्थिति को खोजने के लिए गिनती, और एक ही स्थान पर घटक सूची से घटक तक पहुँचने, लेकिन यह इतना बदसूरत है ...

उस पर कोई सलाह स्वागत है। पढ़ने के लिए धन्यवाद!

उत्तर

3

यह ElementProbe API का उपयोग करके हासिल किया जा सकता है। यह मुख्य रूप से डिबगिंग/चांदा एकीकरण, कोणीय 1.

में element.scope() के लिए इसी तरह के लिए है आदेश में इस एपीआई का उपयोग करने में, आप अपने bootstrap() कॉल में ELEMENT_PROBE_PROVIDERS शामिल करने के लिए की आवश्यकता होगी। इसके बाद आप वैश्विक ng.probe() पर कॉल करके कोई घटक उदाहरण प्राप्त कर पाएंगे।

उदाहरण के लिए, आपके द्वारा वर्तमान घटना लक्ष्य के लिए घटक उदाहरण मिलता है:

ng.probe(event.target).componentInstance 

Updated Plunker showing this is action

आप ElementProbe एपीआई Here के वास्तविक क्रियान्वयन देख सकते हैं।

+1

बहुत बढ़िया! मैंने सोचा कि यह संभव नहीं था, धन्यवाद! कोणीय गिटार समूह से मिली सलाह मुझे डिजाइन को बदलना था ताकि इसे कोणीय तरीके से और अधिक बनाया जा सके।मैं वास्तव में डीओएम में हेरफेर करने से बचने के लिए पहले से ही एक पूरी तरह से अलग कोड संरचना में स्थानांतरित हो गया हूं, लेकिन आपका समाधान स्पष्ट रूप से मेरे प्रश्न में प्रस्तुत मुद्दे को हल करता है। – Antoine

+0

क्या यह अभी भी 2.0 के तहत मौजूद है? – sqwk

+0

काम नहीं करता है। कोई 'एनजी' नहीं है – Phill

संबंधित मुद्दे