Gibt es eine Möglichkeit, CSS in ng-Content innerhalb einer Angular2-Komponente zu verwenden?

Question

Ich habe versucht, css für Kinder Element in einer Komponente über ng-content enthalten. Es scheint noch nicht in Angular 2 implementiert zu sein oder vielleicht hat jemand eine Lösung außer css in ein allgemeines Stylesheet zu setzen?

app.component.ts

<comp-parent> 
    <comp-child></comp-child> 
</comp-parent> 

compParent.component.html

<div class="wrapper"> 
    <ng-content></ng-content> 
</div> 

compParent.component.css

.wrapper > comp-child { 
    margin-right: 5px; <-- Not applied !!! 
} 

Answer 1

Sie können /deep/ oder >>> Selektor:

https://angular.io/docs/ts/latest/guide/component-styles.html

Z. B .:

.wrapper /deep/ comp-child { ... } 

Beachten Sie, dass >>> scheint nicht für Projekte auf Winkel-cli Basis zu arbeiten.

Answer 2

Wenden Sie Klassen auf das HTML an, das gerendert werden soll.

app.component.ts 
    <comp-parent> 
    <comp-child></comp-child> 
    </comp-parent> 

@Component({ 

    selector: 'comp-parent', 
    template: ` 
     <div class="wrapper"> 
      <ng-content></ng-content> 
     </div> 
     `   
}) 
export class CompParent { } 

@Component({ 
selector: 'comp-child', 
template: ` 
    <div class="comp-child"> 
     <div> 
     </div> 
    </div> `, 
}) 

export class CompChild {} 


/// In styles.css 
.wrapper .comp-child { 
    margin-left: 50px; 
} 

Dies funktionierte für mich in meinem Projekt.