Question

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

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

我该如何处理？

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

Answer 1

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

要与默认ViewEncapsulation一起使用，样式应使用shadow-piercing combinator：

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