将父样式绑定到它的子Angular2答案

【问题标题】：Binding parent styles to it's child Angular2将父样式绑定到它的子Angular2
【发布时间】：2017-10-19 20:51:56
【问题描述】：

我可以将与父 templateUrls css 中定义的 css 类关联的 css 样式传递给子组件 css 类吗？

类似：

<parent-component>
  <child-component [class.child-class]="class.parent-class"></child-component>
</parent-component>

现在我在父级 css 中使用 /deep/ 在子级 <div> 上的 css 类中，但我不想将父母 css 类名限制为子级硬编码的名称。

【问题讨论】：

您是否考虑过通过子组件的@Input 传递类名并根据需要使用它？
我想了但是样式不是封装在组件里的吗？
是的，如果它们在组件中，样式将被封装，如果您有一些共同的样式需要同时应用于父子和子，您可以将其保持为全局样式，以便它们不被封装，并根据父母的某些行为，您可以传递要在孩子中使用的类，干杯！！
在我的例子中，子组件是一个带有加载动画的按钮。我想在需要不同样式的应用程序的不同部分将它用作通用按钮。整个应用程序采用组件样式。在全局 CSS 中设置按钮样式对我没有吸引力？？？？
你可以在父类中添加 [ngClass] 然后在子类中使用嵌套类

标签： html css angular frontend

【解决方案1】：

@Component({
  selector: '...',
  template: `
<div>stuff before</div>
<div class="wrapper>
  <ng-content></ng-content>
</div>
<div>stuff after</div>`,
  styles: [`
.wrapper /deep/ * {
// styles for children here
}
  `]
})

【讨论】：