angular - ViewEncapsulation 在设置 highcharts 样式时产生问题

Question

我在一个视图中使用了几个图表，每个图表都是它自己的组件。我有一个 LineChartComponent 和一个 XRangeChartComponent。我正在使用带有 XRangeChartComponent 的样式文件并覆盖一些类。但是这些样式没有在图表中应用。

经过检查，我发现样式文件被angular修改为附加一个类以符合shadow DOM。所以，我在 XRangeChartComponent 中使用了封装：ViewEncapsulation.None。现在样式也被应用于 LineChartComponent。

我该如何进行？

我附上的演示有 2 个折线图，但它重现了我的问题。

https://stackblitz.com/edit/angular-highcharts-styling

Answer 1

为了让模板元素使用带有视图封装的组件样式，它们应该由 Angular 编译器创建。这些元素是由直接访问 DOM 的第三方库创建的，因此不能以这种方式设置样式。

为了与 default 一起使用ViewEncapsulation，样式应该使用shadow-piercing 组合器：

:host ::ng-deep .highcharts-series-0 .highcharts-point {
  fill: #ff0000;
  stroke: #0000ff;
}