如何从父组件的CSS文件中设置子组件？

我有一个父组件：

<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 {
  // Styles for child
}

但是.child样式不会应用于子组件。

我试图使用styleUrls将父的样式表包含到子组件中以解决范围问题：

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

但这没有帮助，也尝试了另一种方式通过获取子样式表到父，但是没有帮助。

那么如何对包含在父组件中的子组件进行样式化？

解决方法

您可以使用封装模式和/或穿透CSS组合器>>>，/ deep /和:: 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>      
`