Question

我在使用指定/所需颜色加载气泡图时遇到一些问题。我尝试了POC并且工作正常，但是当图表加载了实际的应用程序时，颜色会改变，即一些其他bootstrap css类覆盖指定的并且气泡/圆圈呈现为黑色。我在index.html中使用以下引导程序引用。

 <!-- Bootstrap and JQuery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

如果您注意到plunker中的POC，则会生成带有白色的圆圈，这是所需的圆圈，但如果您注意到快照，则会以黑色更改/显示它。我如何覆盖并使其有效？

Plunker

生成气泡图的angular2组件的代码可以在plunker指定的链接

中引用

Answer 1

@Yakov Fain提到的选项可以使用，但是使用ViewEncapsulation.None还有其他副作用，所以如果你想走这条路，请阅读这些。

这个问题出现了before与Angular 2和d3。您可以使用阴影穿孔样式选择器，例如

:host /deep/ h3 {
  font-style: italic;
}

我们可以使用/ deep / selector强制一个样式向下穿过孩子组件树到所有子组件视图中。 / deep /选择器适用于任何深度的嵌套组件，它适用于查看子组件和组件的内容子组件。 / deep / selector也有别名＆gt;＆gt;＆gt;。我们可以使用任何一个两个可以互换。

在此处阅读有关这些特殊选择器的更多信息： https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors

Answer 2

默认情况下，Angular 2模拟Shadow Dom（封装：ViewEncapsulation.Emulated），因此组件的样式不会泄漏到DOM。将此行添加到组件的模板中将其关闭： encapsulation:ViewEncapsulation.None

生成具有所需颜色的图表时出现问题，即不显示指定的颜色

2 个答案: