我有一个父组件:

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

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

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


当前回答

我发现如果你可以访问子组件代码,传递@INPUT变量会更简洁:

这个想法是,父进程告诉子进程它的外观状态应该是什么,而子进程决定如何显示这个状态。这是一个很好的建筑

SCSS道:

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

更好的方法:-使用选定的变量:

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

其他回答

更新-最新方式

如果可以避免,就不要做。正如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>      
`

更新3:

::ng-deep也已弃用,这意味着您不应该再这样做了。当你需要从父组件重写子组件的样式时,不清楚这会如何影响这些事情。对我来说,如果这被完全删除,这似乎很奇怪,因为这将如何影响你需要在库组件中覆盖样式的库?

如果你对此有任何见解,请评论。

更新2:

因为/deep/和所有其他阴影穿刺选择器现在已弃用。Angular放弃了::ng-deep,应该使用它来实现更广泛的兼容性。

更新:

如果使用Angular-CLI,你需要使用/deep/而不是>>>,否则它将无法工作。

原:

在Angular2的Github页面上随机搜索“style”后,我发现了这个问题:Angular2 - innerHTML样式

上面说要使用2.0.0 beta版中添加的一些东西。10、>>>和::shadow选择器。

(>>>)(和等价的/deep/)和::shadow在2.0.0-beta.10中添加。它们类似于shadow DOM CSS组合子(已弃用),并且只适用于封装:ViewEncapsulation。在Angular2中是默认的。它们也可能与ViewEncapsulation一起工作。没有but,然后只是忽略,因为他们是不必要的。在支持更高级的跨组件样式化特性之前,这些组合子只是一种中间解决方案。

所以简单地做:

:host >>> .child {}

在父样式表文件解决了这个问题。请注意,如上面的引用中所述,在支持更高级的跨组件样式之前,此解决方案只是中间的。

我发现如果你可以访问子组件代码,传递@INPUT变量会更简洁:

这个想法是,父进程告诉子进程它的外观状态应该是什么,而子进程决定如何显示这个状态。这是一个很好的建筑

SCSS道:

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

更好的方法:-使用选定的变量:

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

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

首先是一些警告。

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

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

如果您希望更针对实际的子组件,则应该执行以下操作。这样,如果其他子组件共享相同的类名,它们也不会受到影响。

砰砰作响: 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