2016-08-24 4 views
5

कृपया ध्यान रखें कि मैं यहां ट्यूटोरियल कोड के साथ काम कर रहा हूं, इसलिए सब कुछ कड़ाई से सही नहीं है, लेकिन यह काम करता है। सर्वाधिक समय।घटक चयनकर्ताओं के साथ सभी घटकों को एक कोणीय 2 एप्लिकेशन में क्यों उपयोग किया जाना चाहिए?

@Component({ 
    selector: "click-here", 
    template: ` 
     <button (click) = "onClickThere($event)">Click here!</button> 
     {{clickMessage}} 
    ` 
}) 

और यह इस तरह इस्तेमाल किया गया था:

<body> 
    <click-here>Loading...</click-here> 
</body> 

तो मैं एक नया घटक वर्ग जोड़ा है, लेकिन इसकी डेकोरेटर है

मैं इस प्रकार एक घटक वर्ग कि सजाया गया है है:

selector: "type-here"

जब मैं चलाने npm start साथ आवेदन, मैं ब्राउज़र में त्रुटियों की एक सैन्य टुकड़ी मिलता है, के साथ शुरू:

The selector "click-here" did not match any elements

क्यों हर चयनकर्ता एक तत्व मैच के लिए है? इस तरह काम करना संभव नहीं है; कई Component सजावटी रखने में सक्षम होने का एक तरीका होना चाहिए, सभी selector मानों के साथ, और केवल उनमें से कुछ का उपयोग करें। मैं इसे कैसे प्राप्त करूं? मैं गलत क्या कर रहा हूं कि ट्यूटोरियल में सही संस्करण शामिल नहीं है? प्रत्येक Component का नाम या कुछ होना चाहिए?

+0

बेशक आप ([इसे जांचें] (http://plnkr.co/edit/guf5nhtOv5L6xlsIpHHl?p=preview) कर सकते हैं)। आपको अपने पूरे सेटअप को निश्चित रूप से बताना होगा, लेकिन आपके जैसे लगता है * किसी भी तरह उनका उपयोग कर रहे हैं। – dfsq

+0

तो क्या होगा यदि मैं उनका उपयोग कर रहा हूं? क्या कोई नियम है जो कहता है कि मैं केवल एक बार उनका उपयोग कर सकता हूं? – ProfK

उत्तर

0

यह केवल तत्व आप bootstrap(MyComponent) साथ दृष्टांत के लिए प्रासंगिक है।

यदि आप किसी घटक को बूटस्ट्रैप करते हैं और यह किसी चयनकर्ता से मेल नहीं खाता है, तो कोणीय को यह नहीं पता कि उसे कहां रखना चाहिए। कोणीय डीओएम में घटक डालने के लिए जगह खोजने के लिए चयनकर्ता का उपयोग करता है।

इसका यह भी अर्थ है कि आप वर्तमान में अपने पृष्ठ के अंदर केवल एक घटक बूटस्ट्रैप कर सकते हैं। जब कोई घटक bootstrap() पर पास हो जाता है तो चयनकर्ता को ओवरराइड करने का समर्थन करने की योजना है लेकिन वर्तमान में यह समर्थित नहीं है।

भी https://github.com/angular/angular/issues/7136

देखें MyComponent अंदर उपयोग घटकों इस फर्क नहीं पड़ता है। आप जितना चाहें उतने घटकों को प्राप्त कर सकते हैं और केवल वही उपयोग कर सकते हैं जो आपको चाहिए।

+0

तो कोणीय से शिकायतें उन घटकों के बारे में हैं जो बूटस्ट्रैप नहीं हैं ? – ProfK

+0

नहीं, दूसरी तरफ। शिकायत उस घटक के बारे में है जो बूटस्ट्रैप किया गया है लेकिन चयनकर्ता से मेल नहीं खाता है। बूटस्ट्रैप किए गए घटकों को एक चयनकर्ता से मेल खाना चाहिए। –

0

घटक हमेशा एक एचटीएमएल टैग से संबंधित हैं, यह एक और एचटीएमएल की तरह है। एक घटक में एक वर्ग शामिल था, लेकिन कक्षाएं हैं जो एक घटक नहीं हो सकती हैं।

घटक एक अन्य HTML टैग जैसा है जिसे आप जानते हैं, उदाहरण के लिए, अवधि, div, लेकिन एक नया जो आप बनाते हैं और आप इसे परिभाषित कर सकते हैं कि यह अंदर क्या है।

घटक पेड़ की तरह व्यवस्थित किए जा सकते हैं। घटक का उपयोग करने से पहले, एक घटक का उपयोग करने से पहले आपको एक मुख्य घटक (main.ts), मॉड्यूल घटक (app.module.ts) और ऐप घटक (app.component.ts) होना चाहिए, index.html के लिए, ट्यूटोरियल पर और अधिक देख सकते हैं; तो बेहतर है कि आप सभी फाइलों की प्रतिलिपि बनाते हैं, और यदि आप केवल एक घटक का परीक्षण करना चाहते हैं तो आप app.component.ts में अपने घटक को चलाएं या परीक्षण करें; बेहतर है, लेकिन यह है कि आप बच्चों घटक है, समय app.component के सबसे मेरी एप्लिकेशन के अंतर्गत टैग के साथ जुड़ा हुआ है:

<body> 
<my-app>Loading...</my-app> 
</body> 

ट्यूटोरियल लिंक: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

+0

हां, मैं एक तरह से एक अन्य एचटीएमएल टैग की तरह एक घटक की अवधारणा को अच्छी तरह से समझता हूं, लेकिन इसका मेरे प्रश्न से कोई लेना देना नहीं है। यदि आप मेरे प्रश्न को सही तरीके से पढ़ते हैं, तो आप देखेंगे कि मैं मूल रूप से पूछ रहा हूं कि मेरे आवेदन में एक से अधिक घटक क्यों नहीं हो सकते हैं और केवल HTML में एक का उपयोग करें, यानी 'अनुक्रमणिका, .html' फ़ाइल। – ProfK

+0

मैंने जवाब दिया है कि संगठन संगठन एक 'पेड़' है, आप एक डम घटक करते हैं और फिर आपके पास सभी घटक हैं जो आपको बच्चों की तरह पसंद करते हैं .. आपको हमेशा रूट की आवश्यकता होती है – stackdave

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