बाल घटक

Question

एंगुलर 2 में एक ही प्रकार के मूल घटक को इंजेक्ट करें, एक बच्चा घटक अपने मूल घटक को कन्स्ट्रक्टर पैरामीटर के माध्यम से इंजेक्शन प्राप्त कर सकता है। उदाहरण:

@Component({...}) 
export class ParentComponent { 
    ... 
} 

@Component({...}) 
export class ChildComponent { 
    constructor(private parent: ParentComponent) { } 
    ... 
} 

यह अच्छा और अच्छा काम करता है जब तक माता-पिता और बच्चे विभिन्न प्रकार के होते हैं।

हालांकि, एक और सामान्य उपयोग केस एक पेड़ संरचना है जहां प्रत्येक पेड़ नोड एक अलग घटक के रूप में प्रदर्शित होता है। अगर पेड़ नोड घटकों में से प्रत्येक को अपने माता-पिता तक पहुंच होनी चाहिए तो हमें क्या करना चाहिए? मैं इस की कोशिश की है:

@Component({...}) 
export class TreeNodeComponent { 
    constructor(private parent: TreeNodeComponent) { } 
... 
} 

लेकिन यह निम्न क्रम अपवाद के साथ विफल रहता है:

EXCEPTION: Cannot instantiate cyclic dependency! 

मुझे लगता है कि कारण यह है कि कोणीय 2 injects घटक खुद के बजाय अपनी मूल घटक है।

मैं एक घटक के मूल घटक को इंजेक्ट करने के लिए कोणीय कैसे कह सकता हूं भले ही वे एक ही प्रकार के हों?

Plunkerhttps://plnkr.co/edit/ddvupV?p=preview

Answer 1

इस तरह यह काम कर रहा

constructor(@SkipSelf() @Host() @Optional() parent: TreeNodeComponent) {} 

Plunker

• @SkipSelf() अपने इंजेक्शन जो अगर TreeNodeComponent
012 अनुरोध किया जाता है लागू होगा नहीं प्राप्त करने के लिए है
• @Host() होस्ट तत्व
• @Optional() से आगे की ओर न देखें ?? वहाँ रूट नोड

भी देखें http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html

Answer 2

Angular2 एक प्रदाता के लिए वर्तमान इंजेक्टर में लग रहा है के लिए कोई माता पिता TreeNodeComponent है। आपके मामले में, TreeNodeComponent घटक से मेल खाता है।

पैरेंट घटक उदाहरण माता-पिता इंजेक्टर में स्थित है।

मुझे लगता है कि आप माता-पिता इंजेक्टर तक पहुंचने के लिए इंजेक्टर कक्षा को इंजेक्ट करने का प्रयास कर सकते हैं और फिर मूल घटक का उदाहरण प्राप्त कर सकते हैं। ऐसा ही कुछ:

• https://angular.io/docs/ts/latest/api/core/Injector-class.html

कहा, मुझे लगता है और बाध्यकारी के बारे में Gunter की टिप्पणी साझा सेवा है कि:

@Component({ 
    (...) 
}) 
export class TreeNodeComponent { 
    constructor(injector:Injector) { 
    let parentInjector = injector.parent; 
    let parent = patentInjector.get(TreeNodeComponent); 
    } 
} 

इंजेक्टर वर्ग के प्रलेखन के लिए यह लिंक देखें विशेष रूप से प्रासंगिक ...

Answer 3

इस पोस्ट को गुनथर के लिए हल किया गया है। हालांकि, मैं प्राप्त वास्तुकला प्रतिक्रिया के आधार पर अनुवर्ती करना चाहता हूं।

पहला और सबसे महत्वपूर्ण: मैं पूरी तरह से सहमत हूं कि TreeNodeComponent उपयोग केस उदाहरण एक विरोधी पैटर्न है। एक पेड़ की तरह एक डेटा चालित घटक डेटा बाध्यकारी द्वारा नियंत्रित किया जाना चाहिए। इस विरोधी पैटर्न के लिए मेरी माफ़ी।

हालांकि, मेरा वास्तविक उपयोग केस (जो व्याख्या करने के लिए अधिक जटिल है) यह है कि मैं एक उन्नत ड्रॉपडाउन मेनू विकसित करना चाहता हूं। आवश्यकताएँ:

• लटकती स्तरों में से मनमाना संख्या (मेनू, सबमेनू, subsubmenu आदि)
• लटकती डिजाइन समय में परिभाषित किया गया है होना चाहिए - अपनी सामग्री गतिशील डेटा पर आधारित नहीं है।
• प्रत्येक ड्रॉपडाउन आइटम में ईवेंट हैंडलर (_) = संलग्न करना संभव होना चाहिए।
• ड्रॉपडाउन में कस्टम नियंत्रण घटकों को सम्मिलित करना संभव होना चाहिए।

एक के उपयोग का उदाहरण:

<dropdown label="Actions"> 
    <dropdown-item label="Action 1" (click)="action1()"></dropdown-item> 
    <dropdown-item label="Action 2" (click)="action2()"></dropdown-item> 
    <dropdown-item label="Submenu"> 
    <dropdown-item label="Action 3.1" (click)="action31()"></dropdown-item> 
    <dropdown-item label="Action 3.2"> 
     <dropdown-slider (change)="changeHandler()"></dropdown-slider> 
    </dropdown-item> 
    <dropdown-item label="Submenu"> 
     <dropdown-item label="Action 3.3.1" (click)="action331()"></dropdown-item> 
     <dropdown-item label="Action 3.3.2" (click)="action332()"></dropdown-item> 
    </dropdown-item> 
    </dropdown-item> 
</dropdown>  

मेरे विचार है कि इस बंधन डेटा का उपयोग कर लागू करने के लिए मुश्किल होगा है। इवेंट हैंडलर को बांधने और इस तरह कस्टम घटकों को शामिल करने में सक्षम होना बहुत व्यावहारिक है।

लेकिन मैं गलत हो सकता हूं! इसके बारे में कोई राय बहुत स्वागत है!