javascript - 无法使用来自 Angular2 Dart 应用程序的 CSS(CSS 垫片)

Question

我在 Dart 中有 Angular2 应用程序(如此处 - https://angular.io/docs/dart/latest/quickstart.html )并从那里调用 javascript(D3.js 库)

问题:没有为 svg 圆圈加载 css

app_root.dart:

@Component(
  selector: 'root',
  templateUrl: 'app_root.html',
  styleUrls: const ['app_root.css'],
)
class RootComp {
 Future showCircle() async {
    injectScript('http://d3js.org/d3.v3.min.js');

    final d3 = await js.context['d3'];
    var svg = d3['select']('root')
    ['append']('svg')
    ['attr']('width', 100)
    ['attr']('height', 100);

    svg['append']("circle")
    ['attr']("class", "circlemy")
    ['attr']("r", 40)
    ['attr']("cx", 50)
    ['attr']("cy", 50);
    }
}

app_root.html:

<div class="host-root">Pages with circles</div>

app_root.css:

.host-root {
  color: purple;
}
.circlemy {
  fill: blue;
}

因为我使用 Angular2 组件，所以我的 css 文件在构建后转换为以下内容:

.host-root[_ngcontent-qxh-1] {
  color: purple;
}
.circlemy[_ngcontent-qxh-1] {
  fill: none;
}

结果 html 包含以下代码:

<div ng-app="">
<root _nghost-qxh-1="">
    <div _ngcontent-qxh-1="" class="host-root">Page with circles</div>
    <svg width="100" height="100">
    <circle class="circlemy" r="40" cx="50" cy="50"></circle></svg>
</root></div>

我读到在 Angular2 中添加那些 _ngcontent-qxh-1 标记称为 shiming。在 https://github.com/angular/angular.dart/wiki/CSS-Shim我读到“动态创建的 DOM 不会填充”

有什么方法可以让我的 svg 圈子使用 css 吗？

Answer 1

你说得对，样式的重写和属性的增加是模拟类似shadow DOM的样式封装。

Angular 不会将这些属性添加到动态添加的 HTML 中。

作为解决方法，这应该可行:

:host >>> .host-root {
  color: purple;
}
:host >>> .circlemy {
  fill: blue;
}

通过这种方式，选择器被视为 <root> 中的所有内容(模板或子项)匹配 .host-root将应用样式。