我有一个父组件：
<；家长></家长>；
我想用子组件填充此组：
<；家长>；
<；儿童></儿童>；
<；儿童></儿童>；
<；儿童></儿童>；
</家长>；
父模板：
<；div class="；“家长”&燃气轮机；
<；！--孩子们到这里来-->；
<；天然气含量></天然气含量>；
</部门>；
子模板：
<；div class="；“儿童”&燃气轮机；测试</部门>；
由于父项和子项是两个独立的组件，因此它们的样式锁定在各自的范围内
在我的父组件中，我尝试执行以下操作：
.parent.child{
//儿童风格
}
但是.child样式没有应用于子组件
我尝试使用样式URL将父项的样式表包含到子项的组件中，以解决范围问题：
//child.component.ts
样式URL：[
“./parent.component.css”，
“./child.component.css”，
]
但这没有帮助，也尝试了另一种方法，将子样式表提取到父样式表，但也没有帮助
那么，如何设置包含在父组件中的子组件的样式
更新-最新方式
如果你能避免的话，就不要这样做。正如Devon Sans在评论中指出的那样：此功能很可能会被弃用
#更新-更新方式
从Angular 4.3.0开始，所有穿孔css组合器都被弃用。Angular团队推出了一种新的组合器：：ng deep（它仍然是实验性的，不是完整的和最终的方式），如下所示
演示：https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
样式：[
`
：主机{颜色：红色；}
：主机：：ng深层父级{
颜色：蓝色；
}
：主机：：ng深子级{
颜色：橙色；
}
：host:：ng deep child.class1{
颜色：黄色；
}
：host:：ng deep child.class2{
颜色：粉红色；
}
`
],
模板：`
角2//红色
<；家长>//蓝色
<；儿童></儿童>//橙色
<；子类="；“1类”&燃气轮机</儿童>//黄的
<；子类="；类别2“&燃气轮机</儿童>//粉红色
</家长>；
`
#老路
您可以使用封装模式和/或组合器>&燃气轮机>/深/和：：阴影
工作示例：http://plnkr.co/edit/1RBDGQ?p=preview
样式：[
`
：主机{颜色：红色；}
：主机>；>；>；父级{
颜色：蓝色；
}
：主机>；>；>；子{
颜色：橙色；
}
：主机>；>；>；子类1{
颜色：黄色；
}
：主机>；>；>；子类2{
颜色：粉红色；
}
`
],
模板：`
角2//红色
<；家长>//蓝色
<；儿童></儿童>//橙色
<；子类="；“1类”&燃气轮机</儿童>//黄的
<；子类="；类别2“&燃气轮机</儿童>//粉红色
</家长>；
`