Angular 2's component' s样式在封装的子组件中没有继承

Question

我正在编写两个组件 - ComponentA 和 ComponentB，其中 ComponentA 封装了 ComponentB。它们都有一个 p 标签。在我的 ComponentA 中，我正在编写 styles: p { color:red } 在我的 @Component 装饰器中。 ComponentA 的 p 更改为红色，但 ComponentB 的颜色保持黑色。

我认为这是一个需要解决的错误。

Answer 1

样式封装(防止样式渗入或渗出组件)是 Angular 组件的一个主要特性。

有不同的选择来实现你想要的

@Component({
  selector: 'component-b',
  styles: [`
    p { color: red; }
  `]
  ...
  encapsulation: ViewEncapsulation.None
})

或者您可以使用最近引入的(仅限 Angular2)阴影穿刺 CSS 组合器更改 CSS 选择器以跨越组件边界 >>>

@Component({
  selector: 'component-b',
  styles: [`
    :host ::ng-deep p { color: red; }
  `]
  ...
})

第二种方法使用默认封装 (ViewEncapsulation.Emulated)。
您不能将 ::ng-deep (>>>) 与 encapsulation: ViewEncapsulation.Native 一起使用。
对 >>>(或等效的 /deep/)的支持已从 Chrome 中删除，其他浏览器从未真正支持过。

提示:
/deep/ 似乎比 >>>
更适合 SASSSASS 不久前引入了 ::ng-deep 来支持这个 Angular 特性(当对 /deep/ 的支持从 SASS 中移除时)