कोणीय 2 घटक की शैलियों को एन्सेप्लेटेड बाल घटक

Question

में विरासत में नहीं मिला है, मैं दो घटक - घटक ए और घटक बी लिख रहा हूं। जहां घटक ए घटक बी encapsulates। उनमें से दोनों के पास 'पी' टैग है। मेरे घटक ए में, मैं शैलियों को लिख रहा हूं: [p{color:red}] मेरे @ कॉम्पोनेंट सजावट के अंदर। घटक ए का पी लाल हो गया है लेकिन घटक बी का रंग काला रहता है।

मुझे लगता है कि यह एक बग जिसे हल करने की आवश्यकता है।

Answer 1

स्टाइल encapsulation (घटकों में खून बहने से या बाहर से शैली को रोकने) कोणीय घटकों की एक मुख्य विशेषता है।

विभिन्न विकल्पों को प्राप्त करने के आप क्या चाहते हैं

@Component({ 
    selector: 'component-b', 
    styles: [` 
    p { color: red; } 
    `] 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

या आप CSS चयनकर्ता बदल सकते हैं हाल ही में शुरू (Angular2 केवल) छाया भेदी सीएसएस Combinator >>>

@Component({ 
    selector: 'component-b', 
    styles: [` 
    :host >>> p { color: red; } 
    `] 
    ... 
}) 

साथ घटक सीमाओं को पार करने के लिए कर रहे हैं

दूसरा दृष्टिकोण डिफ़ॉल्ट encapsulation (ViewEncapsulation.Emulated) या encapsulation: ViewEncapsulation.None के साथ काम करता है लेकिन यहां >>> अनावश्यक है। आप >>> का उपयोग encapsulation: ViewEncapsulation.Native के साथ नहीं कर सकते - वास्तव में आप वर्तमान में >>> (या समकक्ष /deep/) छाया डोम के लिए बहिष्कृत कर सकते हैं।

संकेत: /deep/ से >>>

Answer 2

एस.ए.एस.एस. के साथ बेहतर काम करने के लिए यह एक बग नहीं है लगता है।

घटक शैलियों सामान्य रूप से घटक के अपने टेम्पलेट में एचटीएमएल पर ही लागू - reference

आप शैलियों है कि आप एक माता पिता के घटक में परिभाषित पूर्वज घटकों को प्रभावित करना चाहते हैं, मैं उपयोग का प्रयोग करेंगे /deep/ चयनकर्ता (जिसमें उपनाम >>> है जो गुंटर द्वारा उनके उत्तर में उपयोग किया जाता है) मूल घटक में, जो शैली को सभी पूर्वजों के घटकों के माध्यम से नीचे मजबूर कर देगा। ध्यान दें कि यह सभी बच्चों और सामग्री बच्चों को देखने के लिए शैली लागू करेगा।

@Component({ 
    selector: 'component-a', 
    styles: [`/deep/ p { color: red; }`] 
}) 

Plunker

भी देखें घटक शैलियाँ देव गाइड में Special Selectors अनुभाग।