कोणीय 2: घटक के मेजबान तत्व को कैसे स्टाइल करें?

Question

मेरे पास अंगुल 2 में घटक है जिसे मेरा-कॉम्प कहा जाता है:

<my-comp></my-comp>

कोणीय 2 में इस घटक के मेजबान तत्व को एक शैली कैसे देती है?

पॉलिमर में, आप ": होस्ट" चयनकर्ता का उपयोग करेंगे। मैंने इसे Angular 2 में आज़माया। लेकिन यह काम नहीं करता है।

:host {
  display: block;
  width: 100%;
  height: 100%;
}

मैंने चयनकर्ता के रूप में घटक का उपयोग करने की भी कोशिश की:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

दोनों दृष्टिकोण काम नहीं करते।

धन्यवाद।

Comments

क्या आप सुनिश्चित हैं कि शैली लागू नहीं है? मैंने एक मूल परियोजना बनाई है और ठीक वैसा ही किया है और यह काम किया है। मैंने my-selector { color : red}अपनी सीएसएस में सेट किया है और यह ठीक काम करता है।

— पचेने

बीटा 7 के रूप में,: मेजबान चयनकर्ता मेरे लिए काम कर रहा है।

— जॉन स्वानसन

कोणीय 2 घटक शैलियाँ

— Ondra Febižka

Answer 1

एक बग था, लेकिन यह इस बीच तय हो गया था। :host { }अब ठीक काम करता है।

भी समर्थित हैं

• :host(selector) { ... }selectorमेजबान तत्व पर विशेषताओं, वर्गों, ... का मिलान करने के लिए

• :host-context(selector) { ... }selectorमाता-पिता के घटकों पर तत्वों, वर्गों, ... का मिलान करने के लिए

• selector /deep/ selector(उर्फ selector >>> selectorSASS के साथ काम नहीं करता है) शैलियों के लिए तत्व सीमाओं से मेल खाते हैं

  • अद्यतन: SASS पदावनत कर रहा है /deep/।
    कोणीय (टीएस और डार्ट) ::ng-deepको प्रतिस्थापन के रूप में जोड़ा गया है जो एसएएसएस के साथ भी संगत है।

  • UPDATE2: ::slotted ::slotted अब सभी नए ब्राउज़रों द्वारा समर्थित है और इसका उपयोग `ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted के साथ किया जा सकता है
    

यह भी देखें कोणीय 2 घटक में बाहरी सीएसएस शैली लोड

/deep/और >>>कर रहे हैं प्रभावित नहीं एक ही चयनकर्ता combinators कि क्रोम में जिसका बहिष्कार कर रहे हैं द्वारा।
कोणीय उन्हें (फिर से लिखना) का अनुकरण करता है, और इसलिए उनका समर्थन करने वाले ब्राउज़रों पर निर्भर नहीं करता है।

यह भी क्यों /deep/और >>>कैसे काम करता है ViewEncapsulation.Nativeजिसके साथ देशी छाया डोम सक्षम करता है और ब्राउज़र समर्थन पर निर्भर करता है।

Comments

@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}

— गुंटर ज़ोचबॉयर

@ Ondra moreižka आप अधिक विस्तृत कर सकते हैं? यह शुद्ध सीएसएस है, यह सीएसएस और खुद के साथ असंगत कैसे हो सकता है?

— गुंटर ज़ोचबॉयर

जब तक मैंने सीएसएस में कुछ महत्वपूर्ण बदलाव को याद नहीं किया है, / गहरा / और >>> सीएसएस नहीं हैं।

— ओन्द्रा kaižka

उन्हें पदावनत कर दिया जाता है, लेकिन इससे कोई फर्क नहीं पड़ता। वे कोणीय (पुन: लिखित) द्वारा अनुकरण किए जाते हैं, इसलिए वे केवल ViewEncapsularion.Emulated(डिफ़ॉल्ट) के साथ काम करते हैं लेकिन साथ नहीं Native।

— गुंटर ज़ोचबॉएर

कोणीय 2.4.7 में मैं :host { p { font-size: 80%; } }एक ... कॉम्पोनेन्ट में काम करने में सक्षम हूँ । जैसे ही मैं इसके साथ उपयोग करने का प्रयास करता हूं styles: [:host { p { font-size: 80%; } }], अब काम नहीं करता है। बहुत अजीब।

— मार्टिन

Answer 2

मुझे एक समाधान मिल गया है कि सिर्फ घटक तत्व को कैसे स्टाइल किया जाए। मुझे कोई दस्तावेज नहीं मिला है कि यह कैसे काम करता है, लेकिन आप इस तरह के 'होस्ट' संपत्ति के तहत घटक मूल्यों में गुण मान डाल सकते हैं:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

अद्यतन: जैसा कि गुंटर ज़ोचबॉयर ने उल्लेख किया है, एक बग था, और अब आप होस्ट तत्व को सीएसएस फ़ाइल में भी स्टाइल कर सकते हैं, जैसे:

:host{ ... }

Comments

मुझे एक डमी .root तत्व बनाने से बेहतर यह पसंद है, लेकिन मुझे यह पसंद नहीं है कि यह इन शैलियों को इनलाइन ( !importantओवरराइड करने के लिए मजबूर करना) के रूप में सेट करता है । वहाँ एक बेहतर waayy हो गया है: \

— Scrimothy

नहीं, host{}किसी stylesUrlफ़ाइल में स्टाइल करने से काम नहीं चलता है। की जरूरत है :host।

— दर्शन

हम मेजबान के अंदर घटक चर का उपयोग कैसे कर सकते हैं? अगर मैं गतिशील रूप से पृष्ठभूमि-रंग तय करना चाहता हूं? ': मेजबान {बैकग्राउंड-रंग: this.bgColor; } '

— प्रताप एके

@ प्रताप.के हाय, आप HostBinding व्युत्पन्न का उपयोग कर सकते हैं। आप उदाहरण होंगे: @HostBinding('style.background-color') private color = 'lime'; Google आपको कई उदाहरण और लेख मिल जाएगा।

— प्रेपिक

Answer 3

इस मुद्दे की जाँच करें । मुझे लगता है कि बग को सुलझा लिया जाएगा जब नया टेम्पलेट प्रीकंप्लीशन लॉजिक लागू किया जाएगा। अभी के लिए मुझे लगता है कि आप जो सबसे अच्छा कर सकते हैं वह है अपने टेम्पलेट को इसमें लपेटना <div class="root">और इसे स्टाइल करना div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

इस प्लंकर को देखें

Answer 4

अपने घटक में आप अपने होस्ट तत्व में .class जोड़ सकते हैं यदि आपके पास कुछ सामान्य शैलियाँ होंगी जिन्हें आप लागू करना चाहते हैं।

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Answer 5

किसी के लिए :hostयहां बाल तत्वों को देखने के लिए कैसे उपयोग करना है, इसका एक उदाहरण है::ng-deep

:host::ng-deep <child element>

जैसे :host::ng-deep span { color: red; }

जैसा कि दूसरों ने कहा /deep/है कि पदावनत कर दिया गया है

Answer 6

कोशिश करें: मेजबान> / गहरा /:

निम्न को parent.component.less फ़ाइल में जोड़ें

:host {
    /deep/ app-child-component {
       //your child style
    }
}

अपने बच्चे के चयनकर्ता द्वारा ऐप-चाइल्ड-कंपोनेंट को बदलें

Comments

क्या होगा अगर आप एक स्टाइल के बजाय वहां बूटस्ट्रैप जैसी स्टाइलशीट चाहते हैं?

— आदित्य विकास देवरापल्ली 3