我正在编写两个组件-ComponentA和ComponentB，其中ComponentA包含封装ComponentB。他们两个都有一个p标签。在我的作品中ComponentA，我正在编写样式：p { color:red }在我的@Component装饰器中。该ComponentA的p更改为红色，但ComponentB的颜色保持黑色。
我认为这是一个需要解决的错误。
样式封装（防止样式渗入或渗出组件）是Angular组件的主要功能。
有多种选择来实现您想要的
@Component({
selector: 'component-b',
styles: [`
p { color: red; }
`]
...
encapsulation: ViewEncapsulation.None
})
或者您可以更改CSS选择器以使用最近推出的（仅适用于Angular2的）阴影穿刺CSS组合器来跨组件边界 >>>
@Component({
selector: 'component-b',
styles: [`
:host ::ng-deep p { color: red; }
`]
...
})
第二种方法适用于默认封装（ViewEncapsulation.Emulated）。
您不能将::ng-deep（>>>）与一起使用encapsulation: ViewEncapsulation.Native。从Chrome中删除了
对>>>（或等效/deep/）的支持，而其他浏览器从未真正支持过。
提示： 似乎比 SASS早前引入支持此Angular功能的SASS 更好 （当对SASS的支持从SASS中删除时）
/deep/ >>> ::ng-deep/deep/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句