css - कोणीय 2: घटक के होस्ट तत्व को कैसे स्टाइल करें?




angular dart (4)

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

<my-comp></my-comp>

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

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

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

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

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

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

धन्यवाद।


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

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

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

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

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

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

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

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

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

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

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


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

@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{ ... }

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

:host::ng-deep <child element>

उदाहरण :host::ng-deep span { color: red; } :host::ng-deep span { color: red; }

जैसा कि अन्य लोगों ने कहा है /deep/ पदावनत है





angular-components