2017-09-27 6 views
5

जिस तरह से मैं इसे देखता हूं, इसे किसी घटक को स्टाइल करने के लिए <div> कंटेनरों के प्रतिस्थापन के रूप में उपयोग किया जा सकता है। उदाहरण:का उपयोग: होस्ट चयनकर्ता बनाम कंटेनर div

का उपयोग करते हुए कंटेनर

@Component({ 
    template: ` 
     <div class="container"> 
      <h1>Some Title</h1> 
      <p>Some Content</h1> 
     </div> 
    `, 
    styles: [` 
     .container { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

:host

@Component({ 
    template: ` 
     <h1>Some Title</h1> 
     <p>Some Content</h1> 
    `, 
    styles: [` 
     :host { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

का उपयोग अगर मैं सही ढंग से समझ, इन दोनों में ठीक उसी समस्या का समाधान। और यह अच्छा है कि एक कम तत्व और वर्ग को हर एक घटक में काफी चिंता करने के लिए अच्छा लगे।

प्रश्न: क्या यह :host है? यदि नहीं, तो इसका क्या मतलब है, और हर जगह कंटेनरों को जोड़ने से आपके घटक को शैली देने के लिए सर्वोत्तम प्रथाएं क्या हैं?

+0

आप सही हैं। : वर्तमान घटक को किसी भी शैली को लागू करने के लिए मेजबान का उपयोग किया जा सकता है। आप इसके लिए एक रैपर और लेखन शैलियों का भी उपयोग कर सकते हैं। तो यह सिर्फ वरीयता का विषय है और आपकी आवश्यकता के आधार पर। यदि यह सिर्फ एक रैपर है तो आप सीधे 'होस्ट' के लिए जा सकते हैं। –

+0

@ किरणडैश यह वरीयता का मामला नहीं है, मेजबान पर शैलियों को सेट करने से घटक की डिफ़ॉल्ट 'डिस्प्ले' प्रॉपर्टी को परिभाषित किया जा सकता है जो डिफ़ॉल्ट रूप से 'इनलाइन' है और इनलाइन लोगों के अंदर ब्लॉक तत्व डालने से कोई मतलब नहीं है IMHO। – n00dl3

उत्तर

3

वे एक ही समस्या का समाधान नहीं करते हैं। :host मेजबान स्टाइलिंग के लिए है और .container किसी भी div को स्टाइल करने के लिए है जिसमें आपके घटक के अंदर container कक्षा है।

.container div आपके घटक के बाहर स्टाइलिंग के लिए उपलब्ध नहीं होगा क्योंकि होस्ट तत्व को स्टाइल किया जा सकता है।

ध्यान दें कि display संपत्ति का प्रारंभिक मान inline है, इसलिए डिफ़ॉल्ट रूप से आपका घटक inline तत्व के रूप में प्रदर्शित किया जाएगा। हो सकता है कि आप इसे नहीं चाहते हैं, खासकर if you have a block element inside of it जो काउंटर-अंतर्ज्ञानी प्रतीत हो सकता है (भले ही इसकी अनुमति है)।

+0

वास्तव में अच्छा जवाब, विशेष रूप से 'प्रदर्शन: ब्लॉक' भाग। –

+0

मुझे लगता है कि वे समकक्ष नहीं हैं, लेकिन निश्चित रूप से वे मेरे उदाहरण में एक ही समस्या को हल करते हैं (जहां मुझे लगता है कि '.container' का केवल एक उदाहरण है जो मेरे टेम्पलेट में बाकी सब कुछ लपेटता है)? 'प्रदर्शन' के बारे में अच्छा बिंदु, यद्यपि! यह निश्चित रूप से एक दुष्प्रभाव है जिसे मैंने नहीं माना था। इसके अलावा @AdrianMoisa encapsulation के बारे में क्या बताया। मुझे अभी भी यकीन नहीं है कि 'होस्ट' चयनकर्ता का बिंदु क्या है, अगर चीजों को स्टाइल करने के लिए नहीं है जो अन्यथा 'कंटेनर'/'.wrapper' /' my-घटक-name '/ ' # whatever'। – Frigo

+0

आप अपने घटक के बाहर से 'कंटेनर' शैली नहीं बना सकते हैं (हटाए गए '/ गहरे /' चयनकर्ता का उपयोग करके)। हालांकि आप मेजबान तत्व शैली कर सकते हैं। तो मेजबान तत्व स्टाइलिंग आपको अपने घटक पर डिफ़ॉल्ट शैलियों को रखने की अनुमति देता है। – n00dl3

0

:host वर्तमान घटक के लिए आपके रैपर तत्व को स्टाइल कर रहा है (उदाहरण के लिए <app-header> तत्व), और जैसा कि मुझे पता है, यह इस तरह के स्टाइल तत्वों के लिए एक छोटा और आरामदायक तरीका है।

0

मैं भी वर्तमान उत्तर देने के लिए निम्नलिखित टिप्पणियों जोड़ देगा:

वर्ग .container

  • आप वर्ग .container से आप हमेशा आप की इच्छा मामले में सिंक में उन्हें रखने के लिए उपयोग करते हैं अपने घटकों का नाम बदलें। बड़े ऐप्स में यह अक्सर विकास के शुरुआती चरणों में होता है।
  • यह भी आपको नाम टकराव के लिए खोल देता है, खासकर यदि आपके पास सीएसएस स्वच्छता आदतें नहीं हैं।
  • इसे तत्व श्रेणी संपत्ति को ओवरराइट करके रन-टाइम पर गलती से हटाया जा सकता है। element.classList.add(); .remove()

का उपयोग करें: मेजबान

  • पुर्जों आप लिखने का बहुत सा की जरूरत है (कभी कभी घटकों के नाम लंबे समय से प्राप्त कर सकते हैं)
  • यह वहाँ कोई बात नहीं क्या कक्षाएं आप तत्व को जोड़ने है । मेरा मानना ​​है कि इसे .container वर्ग पर भी प्राथमिकता होनी चाहिए।
  • (केवल कोणीय) कोणीय समान व्यवहार को अनुकरण करता है, लेकिन यदि आप घटक encapsulation अक्षम करते हैं तो सभी :host चयनकर्ता बेकार हो जाते हैं जो .container कक्षा के उपयोग का कारण बन सकता है।
संबंधित मुद्दे