Angular2中的动态着色图形

Question

我有一个angular2应用程序，在我的一个组件中，我想显示系统各种元素的性能。所以我有以下图片：

这是一个svg，所以我原本以为我会用#box1手动标记这些框，所以我可以做@ViewChild('box1') stage1: ElementRef;这样的事情，但是，任何增加的angulr2似乎都会阻止svg渲染。

我的模板目前有<object id="img" data="assets/img/big_layout.svg" width="292" height="164"></object>个。

如何创建这样的图像并以编程方式更改其部分颜色？

我想也许这可以在div中绘制并使用css，但是如果能够正确地扩展它会很难实现，但是如果有某种方法可以生成它，那么这可能是一种选择吗？

更新

如果我将任何特定于角度的特定代码放入svg文件中，这是一个显示渲染问题的plunk。

Answer 1

您无法通过<object>

引用ViewChild内的元素

作为解决方法，我可以提供以下方式：

视图：

<object ... #svg (load)="load(svg.contentDocument)"></object>

成分<​​/ P>

load(svgDoc) {
  let box1 = svgDoc.getElementById("station1");
}

另请参阅此操作 Plunker