कोणीय 2 - शैलियों के लिए [_ngcontent-mav-x] जोड़ना

Question

मैं एक मूल कोणीय ऐप स्थापित कर रहा हूं, और मैं अपने विचारों में कुछ सीएसएस इंजेक्ट करने की कोशिश कर रहा हूं। यह मेरा घटकों में से एक का एक उदाहरण है:

import { Component } from 'angular2/core'; 
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router'; 

import { LandingComponent } from './landing.component'; 
import { PortfolioComponent } from './portfolio.component'; 

@Component({ 
    selector: 'portfolio-app', 
    templateUrl: '/app/views/template.html', 
    styleUrls: ['../app/styles/template.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true }, 
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent } 
]) 

export class AppComponent { } 

अब .css फ़ाइल को अपने सर्वर से अनुरोध किया जाता है, और जब मैं पृष्ठ स्रोत का निरीक्षण किया, मैं देख सकता यह सिर करने के लिए जोड़ा गया है। लेकिन कुछ अजीब हो रहा है:

<style>@media (min-width: 768px) { 


    .outer[_ngcontent-mav-3] { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 
    .mainContainer[_ngcontent-mav-3] { 
     display: table-cell; 
     vertical-align: middle; 
    } 
    .appContainer[_ngcontent-mav-3] { 
     width: 95%; 
     border-radius: 50%; 
    } 
    .heightElement[_ngcontent-mav-3] { 
     height: 0; 
     padding-bottom: 100%; 
    } 
}</style> 

इस फ़ाइल से हो जाता है:

/* Small devices (tablets, 768px and up) */ 

@media (min-width: 768px) { 
    /* center the mainContainer */ 

    .outer { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 
    .mainContainer { 
     display: table-cell; 
     vertical-align: middle; 
    } 
    .appContainer { 
     width: 95%; 
     border-radius: 50%; 
    } 
    .heightElement { 
     height: 0; 
     padding-bottom: 100%; 
    } 
} 

किसी कृपया समझा सकते हैं जहां _ngcontent-MAV टैग से आता है, यह क्या के लिए खड़े हो और कैसे करता है से छुटकारा पाने के यह?

मुझे लगता है कि यही कारण है कि मेरी शैली मेरे टेम्पलेट्स पर लागू नहीं हो रही है।

यदि आपको ऐप संरचना के बारे में अधिक जानकारी चाहिए, तो कृपया मेरे gitRepo चेकआउट करें, या पूछें और मैं प्रश्न में कोड जोड़ दूंगा।

सहायता के लिए धन्यवाद।

Answer 1

अद्यतन

/deep/ और >>> पदावनत कर रहे हैं। ::ng-deep उन्हें बदल देता है। ::-deep को स्रोत और दस्तावेज़ों में भी बहिष्कृत किया गया है, लेकिन इसका मतलब है कि यह अंततः होगा लेकिन यह स्पष्ट नहीं है कि इसे प्रतिस्थापित किया जाएगा। मैं यह क्या W3C (, या हो जाएगा एस.ए.एस.एस. क्रियान्वयन के आधार पर) छाया डोम (जैसे https://tabatkins.github.io/specs/css-shadow-parts/)

::ng-deep भी एस.ए.एस.एस. में समर्थित है प्रसंगयुक्तप्रस्तुतिकरण

मूल के लिए के साथ आता है पर निर्भर करता है लगता है

देखें encapsulation शैलियों में या बाहर घटकों शैलियों को रोकने में मदद करता है। डिफ़ॉल्ट encapsulation ViewEncapsulation.Emulated है जहां _ngcontent-mav-x जैसे वर्ग घटक टैग में जोड़े जाते हैं और शैलियों को केवल मिलान कक्षाओं पर लागू करने के लिए फिर से लिखा जाता है।

यह कुछ डिग्री छाया छाया के डिफ़ॉल्ट व्यवहार को अनुकरण करता है।

आप @Component() सजावट में इस encapsulation को अक्षम कर सकते हैं।

हाल ही में (पुनः) ने छाया भेदी सीएसएस संयोजक >>>, /deep/, और ::shadow पेश किया है। इन संयोजकों को स्टाइल डोम स्टाइल के लिए पेश किया गया था लेकिन वहां पर बहिष्कृत किया गया है। कोणीय उन्हें हाल ही में पेश करते हैं जब तक कि सीएसएस चर जैसे अन्य तंत्र लागू नहीं होते हैं। भी देखें https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> और /deep/ बराबर हैं और इस combinators का उपयोग कर शैलियों जोड़ा सहायक वर्गों (_ngcontent-mav-x)

* >>> my-component, /* same as */ 
* /deep/ my-component { 
    background-color: blue; 
} 

सभी my-component टैग पर लागू होता है पर ध्यान न दें कोई फर्क नहीं कितना गहरा वे कर रहे हैं बनाता है अन्य घटकों में घोंसला।

some-component::shadow * { 
    background-color: green; 
} 

some-component के खाके में सभी तत्वों पर लागू होता है, लेकिन नहीं आगे वंश।

उन्होंने यह भी जोड़ा जा सकता है

* /deep/ my-component::shadow div { 
    background-color: blue; 
} 

यह सब my-component टेम्पलेट्स के टेम्पलेट में सभी div तत्वों के लिए कोई बात नहीं लागू होता है कितना गहरा my-component अन्य घटकों में नीडिंत है।

/deep/, >>>, और ::shadow केवल

• encapsulation: ViewEncapsulation.None
• encapsulation: ViewEncapsulation.Emulated
• encapsulation: ViewEncapsulation.Native के साथ प्रयोग किया जा सकता है जब ब्राउज़र उन्हें मूल रूप से समर्थन करता है (क्रोम करता है लेकिन कंसोल में एक चेतावनी है कि वे अनुचित हैं प्रिंट) या
  जब ब्राउज़र मूल समर्थन छाया डीओएम और वेब_कंपोनेंट पॉलीफिल लोड नहीं होता है।

एक सरल उदाहरण के लिए इस सवाल का https://stackoverflow.com/a/36226061/217408

भी देखें एनजी-conf से इस प्रस्तुति से भी Plunker देख 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

Answer 2

आप इस प्रयास करना चाहिए,

import {ViewEncapsulation} from 'angular2/core'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    ... 

    })