Angular2的组件样式不会在封装的子组件中继承

发布时间：2020-12-17 08:00:23 所属栏目：安全来源：网络整理

导读：我正在编写两个组件 – componentA和componentB.其中componentA封装了componentB.它们都有’p’标签.在我的componentA中,我在@Component装饰器中编写样式：[p {color：red}]. componentA的p变为红色,但componentB的颜色仍为黑色. 我认为这是一个需要解决的问

我正在编写两个组件 – 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更好用于>>>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!