पैरेंट घटक के सीएसएस फ़ाइल से बाल घटकों को कैसे स्टाइल करें?

Question

मुझे एक मूल घटक मिला है:

<parent></parent>

और मैं इस समूह को बाल घटकों के साथ आबाद करना चाहता हूं:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

मूल टेम्पलेट:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

बाल टेम्पलेट:

<div class="child">Test</div>

चूंकि parentऔर childदो अलग-अलग घटक हैं, इसलिए उनकी शैलियों को उनके स्वयं के दायरे में बंद कर दिया जाता है।

मेरे मूल घटक में मैंने करने की कोशिश की:

.parent .child {
  // Styles for child
}

लेकिन .childशैलियों को childघटकों पर लागू नहीं किया जा रहा है ।

मैंने गुंजाइश मुद्दे को हल करने के लिए घटक में स्टाइलशीट styleUrlsको शामिल करने का उपयोग करने की कोशिश की :parentchild

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

लेकिन इसने मदद नहीं की, childस्टाइलशीट लाने के दूसरे तरीके भी आजमाए parentलेकिन इससे भी कोई फायदा नहीं हुआ।

तो आप बाल घटकों को कैसे स्टाइल करते हैं जो एक मूल घटक में शामिल हैं?

Comments

यह भी देखें stackoverflow.com/questions/34542143/…

— गुंटर Zöchbauer

मेरे उत्तर में पूरी तरह से प्रतिमान-अनुकूल, ट्रिक-मुक्त तरीका देखें ।

— अलेक्जेंडर अबाकुमोव

Answer 1

अपडेट - सबसे नया तरीका

यदि आप इससे बच सकते हैं, तो इसे न करें। जैसा कि Devon Sans टिप्पणियों में बताते हैं: इस सुविधा की सबसे अधिक संभावना होगी।

अद्यतन - नया तरीका

से कोणीय 4.3.0 , सभी भेदी सीएसएस combinartors पदावनत किया गया। कोणीय टीम ने एक नया कॉम्बिनेटर पेश किया ::ng-deep (फिर भी यह प्रायोगिक स्तर पर है न कि पूर्ण और अंतिम तरीके से) जैसा कि नीचे दिखाया गया है,

DEMO: https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }

     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

पुराना तरीका

आप उपयोग कर सकते हैं encapsulation modeऔर / याpiercing CSS combinators >>>, /deep/ and ::shadow

काम करने का उदाहरण: http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

Comments

पियर्सिंग सीएसएस कॉम्बिनेटरों को क्रोम में चित्रित किया गया है

— रॉबिन-हूडी

कोणीय टीम का समर्थन करने की योजना है :: एनजी-डीप का समर्थन भी। उनके डॉक्स से: "शैडो-पियर्सिंग अवरोही कॉम्बिनेटर को पदावनत किया गया है और ब्राउज़र और टूल्स से समर्थन हटाया जा रहा है। जैसे कि हम कोणीय (3 के सभी / गहरे /, >>> और :: एनजी) के लिए समर्थन छोड़ने की योजना बनाते हैं। गहरा)। तब तक :: उपकरण के साथ व्यापक संगतता के लिए एनजी-डीप को प्राथमिकता दी जानी चाहिए। " angular.io/guide/component-styles#deprecated-deep--and-ng-deep ।

— डेवोन सैमस 13

जब तक यह एक स्वीकृत जवाब के रूप में रहता है, तब तक लोग गुमराह होंगे। :: उपरोक्त टिप्पणी में @DevonSams अंक के रूप में एनजी-डीप का उपयोग नहीं किया जाना चाहिए।

— कोस्तस सिबानिस

::ng-deepअब पदावनत है , मैं भविष्य के अनुप्रयोगों में इसका उपयोग करने की सलाह नहीं देते

— विल्ट

एक विकल्प प्रदान किए बिना कुछ को चित्रित करना संभवतः सबसे अच्छा समाधान नहीं है।

— तहलवी

Answer 2

अद्यतन 3:

::ng-deepयह भी पदावनत है जिसका अर्थ है कि आपको अब ऐसा नहीं करना चाहिए। यह स्पष्ट नहीं है कि यह उन चीजों को कैसे प्रभावित करता है जहां आपको मूल घटक से बाल घटकों में शैलियों को ओवरराइड करने की आवश्यकता होती है। मेरे लिए यह अजीब लगता है अगर यह पूरी तरह से हटा दिया जाता है क्योंकि यह उन चीजों को पुस्तकालयों के रूप में कैसे प्रभावित करेगा जहां आपको लाइब्रेरी घटक में शैलियों को ओवरराइड करने की आवश्यकता है?

यदि आपके पास इसमें कोई अंतर्दृष्टि है तो टिप्पणी करें।

अद्यतन 2:

चूंकि /deep/और सभी अन्य छाया भेदी चयनकर्ता अब पदावनत हो गए हैं। कोणीय गिरा ::ng-deepजिसका उपयोग व्यापक संगतता के लिए किया जाना चाहिए।

अपडेट करें:

यदि कोणीय-सीएलआई का उपयोग करना है तो आपको /deep/इसके बजाय उपयोग करने की आवश्यकता है >>>अन्यथा यह काम नहीं करेगा।

मूल:

Angular2 के गितुब पृष्ठ पर जाने और "शैली" के लिए एक यादृच्छिक खोज करने के बाद मुझे यह प्रश्न मिला: Angular 2 - नया HTMLHTML

जिसमें कहा गया है कि कुछ का उपयोग 2.0.0-beta.10करें >>>और ::shadowचयनकर्ताओं में जोड़ा गया ।

(>>>) (और समतुल्य / गहरा /) और :: छाया 2.0.0-beta.10 में जोड़ा गया था। वे छाया डोम सीएसएस कॉम्बिनेटर (जो कि पदावनत हैं) के समान हैं और केवल इनकैप्सुलेशन के साथ काम करते हैं: ViewEncapsulation.Emulated जो कि Angular2 में डिफ़ॉल्ट है। वे शायद ViewEncapsulation.N के साथ भी काम करते हैं लेकिन तब केवल इसलिए अनदेखा कर दिया जाता है क्योंकि वे आवश्यक नहीं हैं। ये कॉम्बिनेटर केवल एक मध्यवर्ती समाधान हैं जब तक क्रॉस-घटक स्टाइल के लिए अधिक उन्नत सुविधाओं का समर्थन नहीं किया जाता है।

तो बस कर:

:host >>> .child {}

में parentकी स्टाइलशीट फ़ाइल समस्या हल हो जाती। कृपया ध्यान दें, जैसा कि ऊपर दिए गए उद्धरण में कहा गया है, यह समाधान केवल मध्यवर्ती है जब तक कि अधिक उन्नत क्रॉस-घटक स्टाइल का समर्थन नहीं किया जाता है।

Comments

ऐसा लगता है कि वे इसके लिए समर्थन हटाने जा रहे हैं :: एनजी-डीप कोणीय.io

— Jed Richards

Answer 3

आपको उपयोग नहीं करना चाहिए ::ng-deep, यह पदावनत है। कोणीय में, माता-पिता से बच्चों के घटक की शैली को बदलने का उचित तरीका है encapsulation(निहितार्थ को समझने के लिए नीचे दी गई चेतावनी पढ़ें):

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

और फिर, आप सीएसएस फॉर्म को अपने घटक को संशोधित करने में सक्षम होंगे: :: एनजी-डीप से

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}

चेतावनी: ऐसा करने से इस घटक के वैश्विक होने के लिए आपके द्वारा लिखे गए सभी सीएसएस नियम बन जाएंगे।

केवल इस घटक के लिए अपने सीएसएस के दायरे को सीमित करने के लिए, अपने घटक के शीर्ष टैग में एक सीएसएस वर्ग जोड़ें और इस टैग के अंदर "सीएसएस" डालें:

template:
    <div class='my-component'>
      <child-component class="first">First</child>
    </div>,

स्कैन फ़ाइल:

.my-component {
  // All your css goes in there in order not to be global
}

Comments

यह सबसे अच्छा उत्तर IMO है, क्योंकि यह वास्तव में जल्द ही होने वाले डिप्रेशन के लिए एक व्यवहार्य विकल्प है ::ng-deep। आम तौर पर, घटकों का अपना चयनकर्ता (वैसे भी <my-component>, <div my-component>) होता है, इसलिए एक विशेष वर्ग वाले आवरण तत्व की कोई आवश्यकता नहीं होती है।

— एलेक्स वॉकर

@AlexWalker यह आपकी स्थिति के लिए सबसे अच्छा जवाब हो सकता है, लेकिन यह उल्लेख के लायक है कि यह ओपी के आधे सवाल का केवल आधा उत्तर देता है: यह विधि सीएसएस को ऊपर से नीचे तक सामान्य रूप से प्रचारित करने की अनुमति देती है, लेकिन, फेंकने के गुण के द्वारा सभी एनकैप्सुलेशन, doesn एक विशिष्ट माता-पिता के बच्चों के लिए वह स्टाइल सीमित नहीं है । यदि आप पेरेंट 1 के बच्चों को एक तरह से और दूसरे पैरेंट 2 के बच्चों को स्टाइल करते हैं, तो सीएसएस के नियम अब दोनों जगहों पर एक-दूसरे से लड़ेंगे। यह मन-स्तब्धकारी दर्दनाक हो सकता है (और इसे से बचने के लिए कोणीय जोड़ा गया)।

— रफिन

@ruffin यही कारण है कि मैंने इस तकनीक का उपयोग करने के निहितार्थ को समझने के लिए अपने जवाब में चेतावनी को जोड़ा और कैसे अपने घटक पर एक शीर्ष सीएसएस टैग का उपयोग करके "मैन्युअल रूप से इनकैप्सुलेट" करना है

— टोनियो

@ टोनियो - हां, सहमत; आपके बजाय सीधे एलेक्स को जवाब दे रहा था। उनकी टिप्पणी, " तो एक विशेष वर्ग के साथ एक आवरण तत्व की भी कोई आवश्यकता नहीं है " मुझे थोड़ा डरा दिया। शायद एक विशिष्ट स्थिति के लिए, लेकिन एन्कैप्सुलेशन का समर्थन करने वाला एक कारण कोणीय "अपशिष्ट" है। यह जवाब विशिष्ट मामलों में एक व्यावहारिक समाधान है, लेकिन, जैसा कि आप कहते हैं, सामान्य रूप से संभावित खतरनाक है। मैथ्यू का समाधान , उदाहरण के लिए, बच्चों को इनकैप्सुलेशन रखते हुए स्टाइल करता है (लेकिन यह वास्तव में गड़बड़ हो जाता है यदि आपके पास एक से अधिक पीढ़ी के बच्चे हैं)।

— रफिन

Answer 4

अफसोस की बात यह है कि / गहरी / चयनकर्ता को पदावनत किया गया है (कम से कम क्रोम में) https://www.chromestatus.com/features/675045663834111120

संक्षेप में यह प्रतीत होता है कि (वर्तमान में) किसी भी दीर्घकालिक समाधान के अलावा किसी भी तरह से अपने बाल घटक को चीजों को गतिशील रूप से शैली में लाने के लिए नहीं है।

आप अपने बच्चे के लिए एक स्टाइल ऑब्जेक्ट पास कर सकते हैं और उसके माध्यम से आवेदन
<div [attr.style]="styleobject">

कर सकते हैं : या यदि आपके पास एक विशिष्ट शैली है तो आप कुछ का उपयोग कर सकते हैं:
<div [style.background-color]="colorvar">

इससे संबंधित अधिक चर्चा: https://github.com/angular/angular/issues/6511

Answer 5

एक ही मुद्दा था, इसलिए यदि आप '>>>' के बजाय scular / sass उपयोग '/ deep /' के साथ angular2-cli का उपयोग कर रहे हैं, तो अंतिम चयनकर्ता अभी तक समर्थित नहीं है (लेकिन css के साथ बढ़िया काम करता है)।

Answer 6

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

प्लंकर: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p ।preview

उदाहरण के लिए:

import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

उम्मीद है की यह मदद करेगा!

codematrix

Answer 7

वास्तव में एक और विकल्प है। जो सुरक्षित नहीं है। आप ViewEncapsulation.None का उपयोग कर सकते हैं लेकिन अपने सभी घटक शैलियों को इसके टैग (उर्फ चयनकर्ता) में डालें। लेकिन वैसे भी हमेशा कुछ वैश्विक शैली और इनकैप्सुलेटेड स्टाइल पसंद करते हैं।

यहाँ संशोधित डेनिस रायबालका उदाहरण दिया गया है:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    parent {
      .first {
        color:blue;
      }
      .second {
        color:red;
      }
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent  {
  constructor() { }
}

Answer 8

कोणीय में इसे प्राप्त करने के लिए कुछ विकल्प हैं:

1) आप गहरी सीएसएस चयनकर्ताओं का उपयोग कर सकते हैं

:host >>> .childrens {
     color: red;
 }

2) आप इसे डिफ़ॉल्ट के रूप में अनुकरण करने के लिए सेट किए गए एन्कैप्सुलेशन को भी बदल सकते हैं, लेकिन आसानी से मूल निवासी में बदल सकते हैं जो शैडो डोम देशी ब्राउज़र कार्यान्वयन का उपयोग करता है, आपके मामले में आपको इसे अक्षम करने की आवश्यकता है

उदाहरण के लिए: `

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    .first {
      color:blue;
    }
    .second {
      color:red;
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
 })
 export class ParentComponent  {
   constructor() {

   }
 }

Comments

वास्तव में इसका मतलब है कि शैली पूरे डोम को प्रभावित करती है, न केवल बाल तत्वों को।

— कास्पर ज़ीमियानेक

Answer 9

आपको मूल घटक में एक बाल घटक तत्वों के लिए सीएसएस नियम नहीं लिखना चाहिए, क्योंकि एक कोणीय घटक एक स्व-निहित इकाई है जो स्पष्ट रूप से घोषित करना चाहिए कि बाहरी दुनिया के लिए क्या उपलब्ध है। यदि भविष्य में बाल लेआउट में बदलाव होता है, तो उस घटक घटक SCSS फ़ाइलों में बिखरे हुए उस बाल घटक तत्वों के लिए आपकी शैली आसानी से टूट सकती है, जिससे आपकी स्टाइल बहुत नाजुक हो जाती है। यही ViewEncapsulationसीएसएस के मामले में है। अन्यथा, यह वैसा ही होगा यदि आप ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग में किसी अन्य वर्ग के कुछ वर्ग के निजी क्षेत्रों को मान प्रदान कर सकते हैं।

इसलिए, आपको जो करना चाहिए, वह उन कक्षाओं के एक सेट को परिभाषित करने के लिए है जिन्हें आप बच्चे के मेजबान तत्व पर लागू कर सकते हैं और कार्यान्वित कर सकते हैं कि बच्चा उनके लिए कैसे प्रतिक्रिया देता है।

तकनीकी रूप से, यह निम्नानुसार किया जा सकता है:

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

दूसरे शब्दों में, आप :hostचाइल्ड कंपोनेंट में संभावित बाल शैलियों को परिभाषित करने के लिए सीएसएस कक्षाओं के कोणीय + सेट द्वारा प्रदत्त छद्म चयनकर्ता का उपयोग करते हैं । फिर आपके पास पूर्व-परिभाषित कक्षाओं को <child>मेजबान तत्व पर लागू करके उन शैलियों को बाहर से ट्रिगर करने की क्षमता है ।

Comments

एक अच्छा समाधान की तरह लग रहा है, वहाँ एक parent.component.scss फ़ाइल है? यदि हाँ, देखभाल करने के लिए इसे दे?

— मनोहर रेड्डी पोरडे

@ManoharReddyPoreddy parent.component.scssबाल घटक के स्टाइल से संबंधित कोई स्टाइल नहीं होना चाहिए । यह इस दृष्टिकोण का एकमात्र उद्देश्य है। आपको आवश्यकता क्यों है parent.component.scss?

— अलेक्जेंडर अबाकुमोव

यकीन नहीं होता, बस थोड़ा सा सीएसएस जान लीजिए। क्या आप jsbin, या अन्य पर पूर्ण समाधान साझा कर सकते हैं आपका समाधान सभी के लिए भविष्य का समाधान हो सकता है।

— मनोहर रेड्डी पोरडे

@ManoharReddyPoreddy मैं आपको पहले अभ्यास में कोड के उन टुकड़ों को आज़माना चाहूँगा। फिर, यदि आप किसी भी समस्या में भाग लेंगे, तो आपके पास एक विशिष्ट प्रश्न होगा, जिसका मैं उत्तर दूंगा या सलाह दूंगा कि किसी विशिष्ट विषय को देखने के लिए कुछ समझ प्राप्त करें कि आपके मुद्दे को कैसे ठीक किया जाए। मैंने ViewEncapsulationसिर्फ इसलिए उल्लेख किया क्योंकि इसका डिफ़ॉल्ट मान ओपी प्रश्न की ओर जाता है। आपको ViewEncapsulationउपरोक्त कोड को काम करने के लिए अलग से असाइन नहीं करना है ।

— अलेक्जेंडर अबाकुमोव

+1 धन्यवाद। भविष्य में इस समाधान को लेने के लिए वापस आ जाएगा, आज के लिए :: ng-deep stackoverflow.com/a/36528769/984471 ।

— मनोहर रेड्डी पोरडे

Answer 10

अगर आपके पास चाइल्ड कंपोनेंट कोड का एक्सेस है तो मुझे @INPUT वैरिएबल पास करना बहुत साफ लगता है :

विचार यह है कि माता-पिता बच्चे को बताते हैं कि उसकी उपस्थिति की स्थिति क्या होनी चाहिए, और बच्चा यह तय करता है कि राज्य को कैसे प्रदर्शित किया जाए। यह एक अच्छा आर्किटेक्चर है

SCSS तरीका:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

बेहतर तरीका: - selectedचर का उपयोग करें:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

Comments

इसके अलावा बनाए रखने के लिए कठिन, विशेष रूप से पुनरावर्ती घटकों के लिए।

— एरिक फिलिप्स

Answer 11

आज (एंगुलर 9) के रूप में, कोणीय कस्टम HTML तत्वों के रूप में घटकों को प्रदर्शित करने के लिए कोणीय शैडो डोम का उपयोग करता है । उन कस्टम तत्वों को स्टाइल करने का एक सुंदर तरीका कस्टम सीएसएस चर का उपयोग करना हो सकता है । यहाँ एक सामान्य उदाहरण है:

class ChildElement extends HTMLElement {
  constructor() {
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    var wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    
    // Create some CSS to apply to the shadow dom
    var style = document.createElement('style');
    
    style.textContent = `
    
      /* Here we define the default value for the variable --background-clr */
      :host {
        --background-clr: green;
      }
      
      .wrapper {
        width: 100px;
        height: 100px;
        background-color: var(--background-clr);
        border: 1px solid red;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// Define the new element
customElements.define('child-element', ChildElement);

/* CSS CODE */

/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */

child-element {
  --background-clr: yellow; 
}

<div>
  <child-element></child-element>
</div>

जैसा कि हम उपरोक्त कोड से देख सकते हैं, हम एक कस्टम एलिमेंट बनाते हैं, ठीक वैसे ही जैसे एंगुलर हर कंपोनेंट के लिए हमारे साथ होता है, और फिर हम कस्टम एलिमेंट के शैडो रूट के भीतर बैकग्राउंड कलर के लिए जिम्मेदार वैरिएबल को ग्लोबल स्कोप से ओवरराइड करते हैं ।

एक कोणीय एप्लिकेशन में, यह कुछ इस तरह हो सकता है:

parent.component.scss

child-element {
  --background-clr: yellow;
}

बच्चों के element.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}

Answer 12

त्वरित उत्तर यह है कि आपको ऐसा नहीं करना चाहिए। यह घटक इनकैप्सुलेशन को तोड़ता है और स्व-निहित घटकों से आपको मिलने वाले लाभ को कमज़ोर करता है। बच्चे के घटक को एक प्रोप फ्लैग को पारित करने पर विचार करें, फिर यह स्वयं तय कर सकता है कि यदि आवश्यक हो, तो अलग-अलग रेंडर कैसे करें या अलग-अलग सीएसएस कैसे लागू करें।

<parent>
  <child [foo]="bar"></child>
</parent>

कोणीय माता-पिता से बाल शैलियों को प्रभावित करने के सभी तरीकों को चित्रित कर रहा है।

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Comments

वैसे उन्होंने अपने डॉक्स में स्पष्ट रूप से कहा है कि वे इसे अंततः कर रहे हैं, जो मुझे लगता है कि वे करेंगे। मैं हालांकि सहमत हूं, कभी भी जल्द नहीं हो रहा।

— जेड रिचर्ड्स

तो वे बहुत ज्यादा अपनी सामग्री पुस्तकालय को बेकार कर देंगे। मैं कभी भी किसी भी पुस्तकालय में एक डिफ़ॉल्ट विषय का उपयोग नहीं कर पाया क्योंकि प्रत्येक ग्राहक को अपने स्वयं के डिजाइन की आवश्यकता होती है। आमतौर पर आप सिर्फ एक घटक की कार्यक्षमता चाहते हैं। मैं यह नहीं कह सकता कि मैं इस निर्णय के पीछे उनके समग्र तर्क को समझता हूं।

— च्रिल्वूड्ज़

Answer 13

मेरे पास भी यह समस्या थी और वह नहीं चाहता था कि मैं उसके विलोपित समाधान का उपयोग करूं, इसलिए मैं उसके साथ समाप्त हो गया:

बराबरी में

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

बाल घटक

@Input() ContainerCustomStyle: string;

HTML div में बच्चा

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

और कोड में

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

अपेक्षित और काम नहीं करना चाहिए;)

Comments

दिलचस्प! मैं कुछ इसी तरह (अब के लिए) के साथ समाप्त हुआ। आपको डोमसनीटाइज़र कहाँ से मिलता है? संपादित करें: यह पाया: angular.io/api/platform-browser/DomSanitizer

— Zaphoid

v7 में हाँ, यह देशी है आपको बस इसे निर्माता में इंजेक्शन का अनुरोध करना होगा। ;), पुराने में मुझे कोई पता नहीं है अगर यह अस्तित्व में है - मैं v7 से शुरू किया;)

— d00lar

Answer 14

इंटरनेट अपडेट के रूप में मैं एक समाधान के पार आया हूं।

पहले कुछ कैविएट।

1. अभी भी यह मत करो। स्पष्ट करने के लिए, मैं बाल घटकों पर योजना नहीं बनाऊंगा ताकि आप उन्हें स्टाइल कर सकें। SOC। यदि आप घटक डिजाइनर के रूप में यह अनुमति देना चाहते हैं तो आपके लिए और अधिक शक्ति।
2. यदि आपका बच्चा छाया डोम में नहीं रहता है तो यह आपके लिए काम नहीं करेगा।
3. यदि आपको एक ऐसे ब्राउज़र का समर्थन करना है जिसमें एक शैडो डोम नहीं है तो यह आपके लिए भी काम नहीं करेगा।

सबसे पहले, अपने बाल घटक के आवरण को छाया के रूप में चिह्नित करें ताकि यह वास्तविक छाया डोम में प्रस्तुत हो। दूसरा, आप माता-पिता को शैली की अनुमति देने वाले तत्व में भाग विशेषता जोड़ें। अपने माता-पिता के घटक स्टाइलशीट में आप उपयोग करने के लिए :: भाग () विधि का उपयोग कर सकते हैं

Answer 15

मैं इसे और अधिक स्पष्ट करने के लिए एक उदाहरण का प्रस्ताव करता हूं, क्योंकि angular.io/guide/component-styles स्टेट्स:

छाया-भेदी वंशज कॉम्बिनेटर को पदावनत किया जाता है और प्रमुख ब्राउज़रों और उपकरणों से समर्थन हटाया जा रहा है। जैसा कि हमने कोणीय (सभी 3 / गहरी /, >>> और :: एनजी-डीप के लिए) में समर्थन छोड़ने की योजना बनाई है। तब तक :: उपकरण के साथ व्यापक संगतता के लिए एनजी-डीप को प्राथमिकता दी जानी चाहिए।

पर app.component.scss, अपने आयात *.scssयदि आवश्यक हो तो। _colors.scssकुछ सामान्य रंग मान हैं:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

सभी घटकों के लिए एक नियम लागू करें

btn-redक्लास वाले सभी बटनों को स्टाइल किया जाएगा।

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

एक घटक को एक नियम लागू करें

घटक btn-redपर कक्षा वाले सभी बटन app-loginस्टाइल किए जाएंगे।

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Answer 16

मैंने इसे एंगुलर के बाहर हल किया है। मैंने एक साझा स्कैस को परिभाषित किया है जो मैं अपने बच्चों को आयात कर रहा हूं।

shared.scss

%cell {
  color: #333333;
  background: #eee;
  font-size: 13px;
  font-weight: 600;
}

child.scss

@import 'styles.scss';
.cell {
  @extend %cell;
}

मेरा प्रस्तावित दृष्टिकोण एक तरीका है कि ओपी ने जिस समस्या के बारे में पूछा है, उसे कैसे हल किया जाए। जैसा कि कई मौकों पर उल्लेख किया गया है, :: एनजी-डीप: एनजी-होस्ट को मूल्यह्रास मिलेगा और एनकैप्सुलेशन को अक्षम करना मेरे विचार में सिर्फ एक कोड रिसाव का बहुत अधिक है।