2016-08-10 16 views
11

के बीच साझा घटक साझा करें मैं अपने angular2-app को नए RC5 पर अपडेट कर रहा हूं। मैं काफी दूर था, और सबकुछ ठीक लगता है, लेकिन अब मैं इसे NgModules में फिर से व्यवस्थित करना चाहता हूं और एक चीज में आया: मैंने विभिन्न मॉड्यूल में कई अन्य घटकों में एक घटक ("घटक") का उपयोग किया (मॉड्यूलमॉड्यूलबी कहें) ।कोणीय 2 आरसी 5 मॉड्यूल

जैसे ही यह कि जिस तरह से उपयोग करते हैं, मैं एक:

Uncaught प्रकार Componenta 2 मॉड्यूल के घोषणाओं का हिस्सा है: ModuleA और ModuleB!

त्रुटि।

जहां तक ​​मैं देखता हूं, मेरे सभी सामान्य सामानों के साथ Shared-Module का उपयोग करने का एकमात्र तरीका यह सही है? या मॉड्यूल में घटकों को साझा करने का कोई आसान तरीका है?

अग्रिम में :)

+0

[यह] (https://medium.com/@alihaghighatkhah/creating-a-shared-module-in-angular2-d281632316ff#.w0dpsvf48) लेख आपको मदद कर सकता है । – Reyraa

उत्तर

22

धन्यवाद आप साझा घटक के लिए एक मॉड्यूल बनाने के लिए और इस मॉड्यूल आयात जहां इस घटक का उपयोग करना चाहते करने के लिए है।

त्रुटि संदेशों के अनुसार एक घटक (या निर्देश, या पाइप) केवल एक मॉड्यूल के directives में सूचीबद्ध किया जा सकता है।

यदि आप पुन: उपयोग करना चाहते हैं, तो आपको उस मॉड्यूल को जोड़ने की आवश्यकता है जिसमें मॉड्यूल के @NgModule({imports: [...]}) पर आप इसे उपयोग करना चाहते हैं।

+0

मुझे डर था कि एकमात्र जवाब था ..;) आपके बिजली की तेज़ प्रतिक्रिया के लिए धन्यवाद [जैसे ही मुझे चलेगा] –

+1

कुछ कोड उदाहरण? – albanx

+2

https://angular.io/docs/ts/latest/guide/ngmodule.html –

4

मैं एक मॉड्यूल बनाता हूं जिसमें मेरे सभी साझा घटक शामिल हैं।

इससे मेरे अन्य मॉड्यूल में इसे आयात करना अधिक आसान हो जाता है।

प्रो टिप: अपने मॉड्यूल में रूटिंग डालें, और कोशिश करें - बस मस्ती के लिए - उनमें से एक आलसी लोड करने के लिए।

तो आपको लगता है देगा: "whoaaaaa मॉड्यूल cooooolllll रहे हैं"

+0

हे, आपके उत्तर के लिए धन्यवाद। एक साझा मॉड्यूल जोड़ने के बाद मुझे एहसास हुआ कि यह पेशेवर है ... यह सब के बाद एक अच्छी बात है, हाँ! आलसी लोडिंग मेरे ऊपर सूची करने के लिए है। –

+2

यदि यह मदद करता है, तो मैंने गिथब पर एक रेपो बनाया है जो कोणीय 2, वेबपैक 2, टाइपस्क्रिप्ट 2 और कोणीय-सामग्री का उपयोग करके डेमो ऐप बनाता है। मैं ऐप मैं सभी सामग्री-घटकों को एक साझा एनजी मॉड्यूल में एक साथ टक्कर देता हूं जिसका मैं उपयोग करता हूं। आप रेपो को एक डॉकर कंटेनर के अंदर भी चला सकते हैं। https://github.com/spock123/angular2-webpack2-typescript2 – Spock

+1

मैं इस दृष्टिकोण का अनुसरण कर रहा हूं; मेरे साझा मॉड्यूल उदा। मेरे हेडर और पाद लेख घटक। लेकिन जैसा कि साझा मॉड्यूल में रूटिंग नहीं है, मेरे पास मेरे हेडर में रूटरलिंक नहीं हो सकते हैं। आप इसे कैसे ठीक करते हैं? प्रत्येक मॉड्यूल के लिए एक अलग हेडर घटक है? – Boland

4

आप साझा मॉड्यूल का उपयोग करने के लिए है।

साझा मॉड्यूल कई अन्य मॉड्यूल में घटकों के टेम्पलेट्स में उपयोग के लिए आमतौर पर उपयोग किए जाने वाले घटकों, निर्देशों और पाइपों को उपलब्ध कराने के लिए मौजूद है।

आपको & निर्यात करना होगा जहां आप चाहें अन्य मॉड्यूल में आयात करें।

अधिक जानकारी के लिए लिंक देखें

shared module

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