Bir ana bileşenim var:

<parent></parent>

Ve bu grubu alt bileşenlerle doldurmak istiyorum:

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

Üst şablon:

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

Alt şablon:

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

Yana parentve childiki ayrı bileşenler vardır, onların stilleri kendi kapsamı kilitlenmiştir.

Ana bileşenimde yapmayı denedim:

.parent .child {
  // Styles for child
}

Ancak .childstiller childbileşenlere uygulanmıyor .

Kapsam sorunu çözmek için 's stil sayfası bileşen styleUrlseklemek için kullanarak çalıştı :parentchild

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

Ama bu yardımcı olmadı, childstil sayfasını getirerek başka bir yol denedi parentama bu da yardımcı olmadı.

Öyleyse bir üst bileşene dahil edilen alt bileşenleri nasıl şekillendirirsiniz?

Güncelleme - En Yeni Yol

Eğer yapamıyorsanız, yapma. Devon Sans'ın yorumlarda belirttiği gibi: Bu özellik büyük olasılıkla kullanımdan kaldırılacak.

Güncelleme - Yeni Yol

Açısal 4.3.0'dan itibaren tüm delici css birleştiricileri kullanımdan kaldırıldı. Açısal ekip , aşağıda gösterildiği gibi yeni bir birleştirici tanıttı ::ng-deep (yine de tam ve son şekilde değil, deneysel seviyede) ,

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>      
    `

Eski yol

encapsulation modeVe / veya kullanabilirsinizpiercing CSS combinators >>>, /deep/ and ::shadow

çalışma örneği: 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>      
`

GÜNCELLEME 3:

::ng-deepaynı zamanda kullanımdan kaldırılmıştır, bu da artık bunu yapmamanız gerektiği anlamına gelir. Bunun, bir üst bileşenden alt bileşenlerdeki stilleri geçersiz kılmanız gereken şeyleri nasıl etkilediği belirsizdir. Bana göre bu tamamen kaldırılırsa garip görünüyor çünkü bu, bir kütüphane bileşenindeki stilleri geçersiz kılmanız gereken kütüphaneler gibi şeyleri nasıl etkiler?

Bu konuda herhangi bir görüşünüz varsa yorum yapın.

GÜNCELLEME 2:

Beri /deep/ve diğer tüm gölge delici seçiciler artık kullanılmıyor. Daha ::ng-deepgeniş bir uyumluluk için kullanılması gereken açısal düşme .

GÜNCELLEME:

Angular-CLI kullanıyorsanız, /deep/bunun yerine kullanmanız gerekir, >>>aksi takdirde çalışmaz.

ORİJİNAL:

Angular2'nin Github sayfasına gidip "style" için rastgele bir arama yaptıktan sonra şu soruyu buldum: Angular 2 - innerHTML styling

Eklenen bir şey kullandığını söyledi 2.0.0-beta.10, >>>ve ::shadowseçiciler.

(>>>) (ve eşdeğer / derin /) ve :: gölgesi 2.0.0-beta.10'da eklenmiştir. Gölge DOM CSS birleştiricilerine benzerler (kullanımdan kaldırılmıştır) ve yalnızca kapsülleme ile çalışır: Angular2'de varsayılan olan ViewEncapsulation.Emulated. Muhtemelen ViewEncapsulation.None ile de çalışırlar, ancak daha sonra sadece gerekli olmadıkları için yok sayılırlar. Bu birleştiriciler, bileşenler arası şekillendirme için daha gelişmiş özellikler desteklenene kadar yalnızca bir ara çözümdür.

Yani basitçe:

:host >>> .child {}

In parentbireyin stil dosyası sorununu çözdü. Yukarıdaki alıntıda belirtildiği gibi, bu çözümün yalnızca daha gelişmiş çapraz bileşen stili desteklenene kadar ara olduğunu unutmayın.

Kullanmamalısınız ::ng-deep, kullanımdan kaldırılmıştır. Angular'da, çocuk bileşeninin stilini ebeveynden değiştirmenin uygun yolu kullanmaktır encapsulation(sonuçları anlamak için aşağıdaki uyarıyı okuyun):

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

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

Ve sonra, css formunu bileşeninizden değiştirmeden değiştirebilirsiniz: ng-deep

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

UYARI: Bunu yapmak, bu bileşenin genel olması için yazdığınız tüm css kurallarını yapar.

Css'nizin kapsamını yalnızca bu bileşenle sınırlamak için, bileşeninizin üst etiketine bir css sınıfı ekleyin ve css'nizi şu etiketin içine "yerleştirin":

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

Scss dosyası:

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

Ne yazık ki / deep / selector'un kullanımdan kaldırıldığı anlaşılıyor (en azından Chrome'da) https://www.chromestatus.com/features/6750456638341120

Kısacası, çocuğunuzun bileşenlerini bir şekilde dinamik bir şekilde şekillendirmesi dışında (şu anda) uzun vadeli bir çözüm yoktur.

Bir stil nesnesini çocuğunuza aktarabilir ve şu yolla uygulayabilirsiniz:
<div [attr.style]="styleobject">

Veya belirli bir stiliniz varsa, aşağıdaki gibi bir şey kullanabilirsiniz:
<div [style.background-color]="colorvar">

Bununla ilgili daha fazla tartışma: https://github.com/angular/angular/issues/6511

Aynı sorun vardı, bu yüzden '>>>' yerine scss / sass ile angular2-cli kullanıyorsanız '/> /' kullanın, son seçici henüz desteklenmiyor (ancak css ile harika çalışıyor).

Gerçek alt bileşene daha hedefli olmak istiyorsanız, aşağıdakileri yapmanız gerekir. Bu şekilde, diğer alt bileşenler aynı sınıf adını paylaşıyorsa etkilenmezler.

Plunker: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview

Örneğin:

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

Bu yardımcı olur umarım!

codematrix

Aslında bir seçenek daha var. Ki bu oldukça güvenli. ViewEncapsulation uygulamasını kullanabilirsiniz. Ama yine de her zaman bazı küresel stil artı kapsüllenmiş stilleri tercih ederim.

İşte modifiye Denis Rybalka örneği:

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() { }
}

Angular'da bunu başarmak için birkaç seçenek vardır:

1) Derin css seçicileri kullanabilirsiniz

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

2) Ayrıca varsayılan olarak Öykünmüş olarak ayarlanmış görünüm kapsüllemesini de değiştirebilirsiniz, ancak Shadow DOM yerel tarayıcı uygulamasını kullanan Yerel olarak kolayca değiştirilebilir, bu durumda devre dışı bırakmanız gerekir

Örneğin: `

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() {

   }
 }

Bir Açısal bileşen, dış dünya için neyin mevcut olduğunu açıkça bildirmesi gereken bağımsız bir varlık olduğundan, alt bileşen öğeleri için CSS kuralları yazmamalısınız. Gelecekte alt düzen değişirse, diğer alt öğelerin SCSS dosyalarına dağılmış olan alt bileşen öğelerine ilişkin stilleriniz kolayca kırılabilir, böylece stiliniz çok kırılgan hale gelir. Bu neViewEncapsulation CSS durumunda içindir. Aksi takdirde, Nesne Odaklı Programlama'daki herhangi bir sınıftan bazı sınıfların özel alanlarına değer atayabiliyorsanız aynı durum geçerlidir.

Bu nedenle, yapmanız gereken, alt ana öğeye uygulayabileceğiniz bir sınıf kümesi tanımlamak ve çocuğun bunlara nasıl tepki vereceğini uygulamaktır.

Teknik olarak şu şekilde yapılabilir:

// 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>

Başka bir deyişle, :hostalt bileşende olası alt stilleri tanımlamak için Angular + CSS sınıfları seti tarafından sağlanan sözde seçici kullanırsınız . Daha sonra, <child>host öğesine önceden tanımlanmış sınıflar uygulayarak bu stilleri dışarıdan tetikleme olanağına sahip olursunuz .

Alt bileşen koduna erişiminiz varsa bir @INPUT değişkenini geçmek çok daha temiz buluyorum :

Fikir, ebeveynin çocuğa görünüm durumunun ne olması gerektiğini söylemesi ve çocuğun durumu nasıl göstereceğine karar vermesidir. Güzel bir mimari

SCSS Yolu:

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

Daha iyi bir yol: - selecteddeğişken kullanın :

<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>

Bugün itibariyle (Açısal 9), Angular bileşenleri görüntülemek için bir Gölge DOM kullanır özel HTML öğeleri . Bu özel öğeleri biçimlendirmenin zarif bir yolu, özel CSS değişkenlerini kullanmak olabilir . İşte genel bir örnek:

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>

Yukarıdaki koddan da görebileceğimiz gibi, tıpkı Angular'ın her bileşenle bizim için yapacağı gibi özel bir öğe yaratıyoruz ve sonra özel öğenin gölge kökündeki arka plan renginden sorumlu olan değişkeni global kapsamdan geçersiz kılıyoruz .

Açısal bir uygulamada bu şöyle bir şey olabilir:

parent.component.scss

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

çocuk element.component.scss

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

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

Hızlı cevap, bunu hiç yapmamanız gerektiğidir. Bileşen kapsüllemesini kırar ve bağımsız bileşenlerden elde ettiğiniz faydayı azaltır. Alt bileşene bir pervane bayrağı geçirmeyi düşünün, ardından farklı şekilde nasıl işleneceğine veya gerekirse farklı CSS uygulayacağına karar verebilir.

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

Açısal, çocuk stillerini ebeveynlerden etkilemenin tüm yollarını reddetmektedir.

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

Ayrıca bu sorun vardı ve böylece sona erdi böylece kullanım dışı çözüm kullanmak istemiyordu:

parrent içinde

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

alt bileşen

@Input() ContainerCustomStyle: string;

html div içinde çocuk

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

ve kodda

constructor(private sanitizer: DomSanitizer) {  }

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

beklendiği gibi çalışır ve itiraz edilmemelidir;)

İnternet güncellemeleri olarak bir çözümle karşılaştım.

Önce bazı uyarılar.

1. Hala yapma. Açıklığa kavuşturmak için, onları şekillendirmenize izin veren alt bileşenler planlamam. SOC. Eğer bileşen tasarımcısı olarak buna izin vermek istiyorsanız, o zaman size daha fazla güç.
2. Çocuğunuz gölge dom'da yaşamıyorsa, bu sizin için çalışmaz.
3. Bir gölge dom'a sahip olmayan bir tarayıcıyı desteklemeniz gerekiyorsa, bu da sizin için çalışmaz.

İlk olarak, alt bileşeninizin kapsüllenmesini gerçek gölge domunda görüntülenecek şekilde gölge olarak işaretleyin. İkinci olarak, üst öğenin stil vermesine izin vermek istediğiniz öğeye parça niteliğini ekleyin. Ebeveyninizin bileşen stil sayfasında erişmek için :: part () yöntemini kullanabilirsiniz

Daha açık hale getirmek için bir örnek öneriyorum, çünkü angular.io/guide/component-styles belirtiyor:

Gölge delici alt öğe birleştiricisi kullanımdan kaldırılmıştır ve ana tarayıcılardan ve araçlardan destek kaldırılmaktadır. Bu nedenle Açısal olarak desteği düşürmeyi planlıyoruz (/ deep /, >>> ve :: ng-deep'in tümü için). O zamana kadar :: ng-deep, takımlarla daha geniş bir uyumluluk için tercih edilmelidir.

Açık olarak app.component.scss, *.scssgerekirse içe aktarın . _colors.scssbazı ortak renk değerlerine sahiptir:

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

Tüm bileşenlere kural uygulama

btn-redSınıfı olan tüm düğmeler stilize edilecektir.

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

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

Tek bir bileşene kural uygulama

Bileşen btn-redüzerinde sınıfa sahip olan tüm düğmeler app-loginstilize edilecektir.

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

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

Angular dışında çözdüm. Çocuklarıma aktardığım paylaşılan bir scss tanımladım.

shared.scss

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

child.scss

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

Benim önerdiğim yaklaşım OP'nin sorduğu sorunun nasıl çözüleceğinin bir yoludur. Birçok durumda belirtildiği gibi :: ng-deep,: ng-host amortismana tabi tutulacak ve kapsüllemeyi devre dışı bırakmak, kod sızıntısının çok fazla olduğunu düşünüyorum.