2016-04-14 13 views
5

में सभी घटकों के लिए सीएसएस शैली लागू करें मैं जैसे बहुत ही बुनियादी है, और पुन: प्रयोज्य सीएसएस नियम, है:कोणीय 2 एप्लिकेशन

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
} 

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

मुझे यहां कुछ बहुत याद आना चाहिए।

उत्तर

5

शायद आपको अपने एचटीएमएल या बाहरी स्टाइलशीट में वैश्विक सीएसएस नियम घोषित करना चाहिए।

+3

लगता है कि मैं भी सोच रहा था निर्दिष्ट कर सकते हैं ** कोणीय ** इसके बारे में। हाँ, आप सही हाहा हैं। – mariocatch

1

आप

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
} 

करने के लिए और अपने बच्चे घटकों में आप encapsulation: ViewEncapsulation.None की संपत्ति सेट कर सकते हैं यह मेरी अपनी शैली को बदलने हासिल कर सकते हैं (लेकिन डिफ़ॉल्ट रूप से यह आप भी स्थापित करने के लिए कोई जरूरत नहीं कर सकते हैं ताकि ViewEncapsulation.None है)।

तो अब आप अपने सभी बच्चों के घटकों में अपनी स्टाइल क्लास को उपयोगकर्ता करने में सक्षम होना चाहिए।

डेमो: http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

8

कोणीय अपने घटक के लिए अद्वितीय वर्गों कहते हैं और पुनर्लेखन सीएसएस के चयनकर्ताओं केवल मैच के लिए घटकों को जोड़ा गया है कि घटक अद्वितीय वर्ग, <head> लिए सीएसएस जोड़ने से पहले। यह छाया डोम शैली encapsulation अनुकरण करने के लिए है।

आप

  • से यह आस-पास काम encapsulation: ViewEncapsulation.None जो पुनर्लेखन घटकों के लिए शैलियों जहां कैप्सूलीकरण अक्षम किया गया है

  • index.html सीधे करने के लिए सीएसएस जोड़ने से बचाता है निर्धारित कर सकते हैं। कोणीय सीएसएस को फिर से लिखना नहीं है जो घटकों में नहीं जोड़ा गया है।

  • "छाया भेदी सीएसएस संयोजक" * >>> someSelector { ... } का उपयोग करें जो सीएसएस को घटकों में जोड़े गए अद्वितीय वर्गों को अनदेखा करता है।
    संकेत: /deep/>>> का उपनाम है लेकिन SASS के साथ बेहतर काम करता है।

0

एक कमांड लाइन चलाने से:

NPM फ़ाइल-लोडर शैली-लोडर --save-देव

अब

webpack.config.js में लोडर सरणी में निम्नलिखित पंक्ति जोड़ स्थापित:

{परीक्षण: /\.(eot|woff2|woff|ttf|svg)/, लोडर: 'फ़ाइल-लोडर'}

अब आप अपने app.component.ts में

, अपने आयात बयान के बाद, जोड़ने निम्नलिखित पंक्ति:

की आवश्यकता है ('शैली! बूटस्ट्रैप/dist/css/bootstrap।सीएसएस ')

इसका मतलब यह है कि आप angular2/angular2-बीज के नवीनतम संस्करण यहाँ स्थित उपयोग कर रहे हैं: 2016

0

मेरी राय में आप अपनी पूरी भर इस संबंध एक विशेष रणनीति के लिए सहमत होना चाहिए नवंबर 8 के रूप में https://github.com/angular/angular2-seed टीम।

उदा। आप encapsulation: ViewEncapsulation.None को अपने उत्तर में उल्लिखित @sreeramu की तरह सेट कर सकते हैं। लेकिन केवल ऐप (रूट) घटक के लिए।

आपको सीएसएस encapsulation का लाभ लेना चाहिए जितना आप इसे कई घटकों के लिए बंद कर सकते हैं थोड़े सुगंधित है। लेकिन इसे केवल एक घटक में लागू करना ठीक काम कर सकता है।

0

आप src/styles.css

के अंदर अपने सीएसएस लिख सकते हैं या आप अपने नए सीएसएस फ़ाइल बनाने और अंदर .angular-cli.json फ़ाइल

"apps": [ 
    "styles": ["styles.scss"] 
]