将父样式绑定到其子样式 Angular2

Question

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

像这样：

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

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

Answer 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
}
  `]
})