कोणीय 2 मॉड्यूल स्तर स्टाइलशीट

Question

मैं sass का उपयोग करके मॉड्यूलर संरचना में अपनी वेबसाइट तैयार कर रहा हूं और मैं स्टाइलशीट को इस तरह से व्यवस्थित करने के लिए तैयार हूं कि मैं प्रत्येक मॉड्यूल स्तर (घटक स्तर के बजाय) पर स्टाइलशीट परिभाषित करता हूं और फिर इसे आयात करता हूं पूरे मॉड्यूल के लिए मानक लेआउट रखने के लिए सभी घटक।

तो क्या यह एक अच्छा दृष्टिकोण है?

यदि हां, तो module.ts फ़ाइल से सीएसएस को सभी घटकों में निर्यात करने का कोई तरीका है। इसी तरह, सेवाओं को providers का उपयोग करके उपलब्ध कराया जाता है। यह मुझे व्यक्तिगत रूप से सभी घटकों में एक ही सीएसएस फ़ाइल आयात करने का दर्द बचाएगा।

Answer 1

हां। प्रत्येक घटक के लिए अलग-अलग स्टाइल शीट रखने के लिए निश्चित रूप से दृष्टिकोण अच्छा होता है। यहां तक ​​कि कोणीय सीएलआई भी एक ही दृष्टिकोण का पालन कर रहा है। आप एक नजर है और पर हाथ प्राप्त कर सकते हैं: LINK

तो यह एक अच्छा तरीका है?

हाँ यह कोणीय ऐप के लिए फ़ाइल संरचना की व्यवस्था करने के लिए एक सही दृष्टिकोण है।

यदि हां, तो मॉड्यूल.एस फ़ाइल से सीएसएस को पर सभी घटकों को निर्यात करने का कोई तरीका है।

डिफ़ॉल्ट रूप से कोणीय सीएलआई मॉड्यूल के लिए कोई स्टाइलशीट नहीं देता है और यह भी समझ में आता है। मॉड्यूल स्तर पर आपको स्टाइलशीट की आवश्यकता क्यों है? आप घटक स्तर स्टाइलशीट में घटक से संबंधित शैलियों को जोड़ सकते हैं और इसके अतिरिक्त यदि आप चाहते हैं कि आपके पास प्रोजेक्ट स्तर पर एक स्टाइलशीट हो, जहां आप प्रोजेक्ट के लिए सभी सामान्य शैलियों को जोड़ सकते हैं।

Answer 2

तो क्या यह एक अच्छा दृष्टिकोण है?

इसका व्यक्तिपरक। कोणीय मॉड्यूल कार्यक्षमता के एकजुट ब्लॉक में एक आवेदन व्यवस्थित करने में मदद करते हैं। क्या मैं अलग-अलग ब्लॉक कार्यक्षमताओं के लिए अलग शैलियों चाहता हूं? लगभग नामुमकिन।

क्या सीपीयू को मॉड्यूल.एसएस फ़ाइल से सभी घटकों में निर्यात करने का कोई तरीका है।

नहीं। यह केवल घटक स्तर पर समर्थित है। वर्कअराउंड में सभी मॉड्यूल घटकों द्वारा संदर्भित एकल सीएसएस फ़ाइल होगी। फिर फिर एक अच्छा अभ्यास सीएसएस को मॉड्यूलर करना और घटक स्तरों पर उनका उपयोग करना होगा।

@import 'common'; 

// project level classes 
@import 'project-level-styles'; 

// module level classes 
@import '../app/customer/customer.scss' 
@import '../app/customer/product.scss' 

इन customer.scss में

तो और product.scss मैं होगा:

Answer 3

तो कहते हैं कि हम अपने कोणीय एप्लिकेशन में निम्नलिखित संरचना है

+-- src 
| +-- app 
| | +-- customer 
| | | +-- customer.scss 
| | | +-- customer.module.ts 
| | +-- product 
| | | +-- product.scss 
| | | +-- product.module.ts 
| +-- sass 
| | +-- _common.scss 
| | +-- app.scss 
| | +-- project-level-styles.scss 

हम सेटअप तो जैसे हमारी परियोजना स्तर सास फ़ाइल कर सकते हैं देता है कक्षाएं जो उस मॉड्यूल के अंदर कई घटकों में आम हैं।

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

Angular Component Styles

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

तो ध्यान रखें कि किसी भी शैली घटकों के साथ जुड़े नहीं हो कृपया styleUrls सरणी यह ​​आपकी साइट में किसी भी तत्व को लागू किया जा सकता है (यदि आप विशिष्टता का उपयोग नहीं करते)। यह केवल उस मॉड्यूल पर लागू नहीं होता है, इसलिए यह सभी परिस्थितियों का समाधान नहीं हो सकता है, लेकिन यह कुछ है जो मैं अपने मॉड्यूल के लिए करता हूं, इसे समझता हूं, मैं उस मॉड्यूलर स्टाइलशीट में अपनी शैलियों को रूट करने के द्वारा उस मॉड्यूल के विशिष्ट होने के लिए लिख सकता हूं कि मॉड्यूल के लिए तत्व ...

घटक बनाम वैश्विक

अपने आवेदन में मेरी customerModulecustomerComponent नामक एक जड़ घटक है और मैं के एक वर्ग है कि कि html में एक मूल तत्व है:

customer-container

तो अंदर मेरे customer.scss मैं इस तरह मेरी शैली के सभी पहले जोड़ें कर सकते हैं:

.customer-container .info-heading { 
    font-size: 15px; color: #333; 
} 

.customer-container .section-divider { 
    margin-top: 1em; border-top: 1px solid #dfdfdf; 
} 

तो मैं अब विशिष्टता के कुछ स्तर है कि अन्य परियोजना घटकों में से खून बह रहा से मेरी शैली रखने के लक्ष्य को हासिल कर सकते हैं।