更新-最新方式
如果可以避免,请不要这样做。正如Devon Sans在评论中指出的那样:该功能很可能已被弃用。
更新-较新的方式
从 ,不推荐使用所有可穿透的CSS组合器。Angular团队推出了一种新的组合器 ,如下所示,
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>
`
旧方法
您可以使用encapsulation mode
和/或piercing CSS combinators >>>, /deep/ and::shadow
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>
`