我有一个父组件:

<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',
]

但这并没有帮助,我还尝试了另一种方法,将子样式表取到父样式表中,但这也没有帮助。

那么,如何样式包含在父组件中的子组件呢?


当前回答

随着互联网的更新,我想到了一个解决方案。

首先是一些警告。

还是不要这么做。澄清一下,我不打算让子组件允许您对它们进行样式设置。SOC。如果你作为组件设计者想要允许这一点,那么你就拥有了更多的权力。 如果你的孩子没有生活在阴影中,那么这对你来说就行不通了。 如果你必须支持一个浏览器,不能有一个影子dom,那么这也不会为你工作。

首先,将子组件的封装标记为shadow,以便它在实际的shadow dom中呈现。其次,将part属性添加到希望允许父元素设置样式的元素中。在父组件样式表中,可以使用::part()方法进行访问

其他回答

简单的回答是,你根本不应该这么做。它破坏了组件封装,破坏了从自包含组件中获得的好处。考虑将道具标志传递给子组件,然后它可以自行决定如何以不同的方式呈现或应用不同的CSS,如果需要的话。

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

Angular不赞成所有影响父样式的子样式的方法。

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

设'parent'是父类的类名,'child'是子类的类名

.parent .child{
//css definition for child inside parent components
} 

你可以使用这个格式来定义父组件中的子组件的CSS格式

我也有这个问题,不想使用弃用的解决方案 所以我最后得出:

在parrent

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

子组件

@Input() ContainerCustomStyle: string;

在child In 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);
  }

作品像预期的那样,不应该被弃用;)

更新-最新方式

如果可以避免,就不要做。正如Devon Sans在评论中指出的那样:这个功能很可能会被弃用。

最后一次更新

从Angular 4.3.0到现在(Angular 12.x),所有尖锐的css组合子都被弃用了。Angular团队引入了一个新的组合子::ng-deep,如下所示:

演示: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>      
    `

老方法

您可以使用封装模式和/或穿孔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>      
`

也有同样的问题,所以如果你在scss/sass中使用angular2-cli,使用'/deep/'而不是'>>>',最后的选择器还不支持(但适用于css)。