2016-01-28 29 views
6

से खुद को हटा रहे हैं मेरे पास कोणीय 2 में दो बाल घटकों (dataset-create और dataset-detail) के साथ एक मूल घटक है। जनक घटक नियंत्रण जो दो घटक के अपने टेम्पलेट में इस कोड का उपयोग करके किसी भी समय पर दिखाया गया है:कोणीय 2: घटक डीओएम

<div [ngSwitch]="mode"> 
<template [ngSwitchWhen]="'create'"> 
    <dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create> 
</template> 
<template [ngSwitchWhen]="'detail'"> 
    <dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail> 
</template> 
</div> 

माता पिता घटक बच्चों से घटना (close) को सुनता है। जब यह यह प्राप्त करता है, एक कॉलबैक फ़ंक्शन कहा जाता है (onDatasetFormClose()) जो निम्नलिखित कोड है:

private onDatasetFormClose() { 
    this.mode = "list"; 
} 

इस समारोह mode चर का मान बदल जाता है। इससे ngSwitchWhen दोनों विफल होने का कारण बनता है और इस प्रकार वर्तमान में सक्रिय बाल घटक नष्ट हो जाता है। क्योंकि यह पैरेंट घटक पर निर्भर करता है

<form novalidate="novalidate"> 
    <button type="button" (click)="onClose()">close</button> 
    <button type="submit" (click)="onSubmit()">submit</button> 
    <label for="dataFileD">data</label> 
    <input id="dataFileD" type="file" (change)="onFileChange($event)"> 
</form> 

हालांकि, इस समाधान मेरे लिए लग रहा है "गलत", (और इसलिए:

इसके अलावा, FYI करें, यह कैसे बच्चे घटकों में से एक के टेम्पलेट की तरह लग रहा है इसे स्वतंत्र रूप से पुन: उपयोग करना कठिन है)।

मुझे लगता है कि एक समान परिणाम प्राप्त करने का एक और तरीका राउटर का उपयोग करना होगा। यह समाधान न केवल "बहुत-फूला हुआ-के-कारण" लगता है, बल्कि उपरोक्त मेरे समाधान के समान समस्या से भी पीड़ित है: बच्चे के घटक को स्वतंत्र रूप से उपयोग नहीं किया जा सकता है।

क्या यह संभव है कि कोई बच्चा घटक स्वयं को डीओएम से हटा दें? इस तरह की स्थितियों को संभालने का सही तरीका क्या है? हो सकता है कि डीओएम से खुद को हटाने वाले घटक एक खराब कोणीय 2 कोडिंग अभ्यास है?

अग्रिम धन्यवाद।

+1

के साथ सबकुछ लपेटें, मुझे लगता है कि किसी घटक के लिए पैरेंट घटक की आवश्यकता है। किसी भी घटक जो किसी ईवेंट को उत्सर्जित करता है, उसके लिए शायद एक मूल घटक की आवश्यकता होती है। उदाहरण के लिए, टैब लागू करने के लिए, आपको 'टैब' बाल घटकों के अतिरिक्त, शायद माता-पिता 'टैबसेट' घटक की आवश्यकता हो। –

उत्तर

4

मुझे लगता है कि किसी घटक के लिए पैरेंट घटक की आवश्यकता होती है। एक घटना को उत्सर्जित करने वाले घटक आमतौर पर एक मूल घटक की आवश्यकता होती है। और कभी-कभी घटकों को अधिक कसकर जोड़ दिया जाता है, या इरादा/एक साथ उपयोग करने की आवश्यकता होती है। उदाहरण के लिए, टैब लागू करने के लिए, हमें शायद tab बाल घटकों के अलावा, माता-पिता tabset घटक की आवश्यकता हो। उदा।, ng2-bootstrap tabs implmenentation देखें।

माता-पिता घटक पर निर्भर होना भी एक सचेत डिज़ाइन निर्णय हो सकता है। उदाहरण के लिए, यदि हम अपरिवर्तनीय एप्लिकेशन डेटा का उपयोग करके हमारे आवेदन को मॉडलिंग कर रहे हैं (Savkin blog देखें), तो हम जानबूझकर हमारे घटक को किसी भी एप्लिकेशन डेटा को संशोधित करने से रोक सकते हैं। यदि एक डिलीट ऑपरेशन की आवश्यकता है, तो हम कुछ उच्च स्तरीय घटक अनुप्रयोग डेटा को संशोधित करने के लिए एक ईवेंट उत्सर्जित कर सकते हैं (और फिर उसे इनपुट प्रॉपर्टी के माध्यम से वापस भेज दें)।

+0

असल में आपके अंक बहुत समझ में आते हैं। मैंने उस दृष्टिकोण का पालन करने का फैसला किया! धन्यवाद! – AstrOne

+0

इस तरह के मुद्दे वाले अन्य लोगों को देखने के लिए अच्छा लगा। मैं वास्तव में एक बच्चे को माता-पिता को डेटा भेजने का प्रयास कर रहा हूं (माता-पिता डेटा प्रदर्शित करता है)। सबसे पहले मैं डेटा पकड़ने के लिए एक और सेवा का उपयोग कर रहा था, और माता-पिता और बच्चे दोनों उस पर निर्भर थे। यह वास्तव में कष्टप्रद था, जो आपने यहां हल किया है वह हल करता है जिस तरह से मुझे लगता है कि इसे किया जाना चाहिए। – Chris

+0

@ क्रिस, यदि आपके द्वारा साझा किया जा रहा डेटा किसी सरणी या ऑब्जेक्ट (यानी, एक प्राचीन प्रकार (स्ट्रिंग, संख्या, बूलियन) के बजाय संदर्भ प्रकार है, तो माता-पिता पहले से ही आपके द्वारा किए गए किसी भी बदलाव को देख सकते हैं बच्चे में साझा डेटा, क्योंकि माता-पिता और बच्चे एक ही संदर्भ साझा करते हैं। अधिक जानकारी के लिए [यह उत्तर] देखें (http://stackoverflow.com/a/34208500/215945)। यह जो आप पूरा करने की कोशिश कर रहे हैं उसे सरल बना सकते हैं। –

0

आपके पास उप घटक पर show का ब्लूओलेन ध्वज क्यों नहीं है। फिर जब आपको आवश्यकता हो तो इसे false पर बदलें। टेम्पलेट में, बस

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