我正在编写两个组件 – componentA和componentB.其中componentA封装了componentB.它们都有’p’标签.在我的componentA中,我在@Component装饰器中编写样式：[p {color：red}]. componentA的p变为红色,但componentB的颜色仍为黑色.
我认为这是一个需要解决的问题.
样式封装(防止样式流入或流出组件)是Angular组件的主要特征.
有不同的选择来实现你想要的
@Component({
selector: 'component-b',styles: [`
p { color: red; }
`]
...
encapsulation: ViewEncapsulation.None
})
或者您可以使用最近引入的(仅限Angular2)阴影穿孔CSS组合器>>>更改CSS选择器以跨越组件边界
@Component({
selector: 'component-b',styles: [`
:host >>> p { color: red; }
`]
...
})
第二种方法适用于默认封装(ViewEncapsulation.Emulated)或封装：ViewEncapsulation.None但这里>>>是多余的.您不能使用>>>封装：ViewEncapsulation.Native – 实际上你现在可以但是>>>对于shadow DOM,不推荐使用(或等效/ deep /).
提示：/ deep /似乎比SASS更好用于>>>
