Angular 2和嵌入式SVG的数据绑定

Geo*_*e C 5 javascript svg angular

我有一个SVG图片,其中一部分会根据API调用的响应而动态更改。我要改变的一个方面是SVG中不同元素的颜色,我可以通过应用不同的CSS类来比较干净地处理它们。但是,我也想更改一些文本元素。

我目前正在通过将完整的SVG图像内联到我的组件模板中,并挑选出我希望绑定到模型的零件来工作。但是,这意味着任何时候我想编辑原始SVG图像时,都需要将SVG标记复制/粘贴回模板中,然后重新应用这些绑定。

理想情况下,我要做的是将SVG保留为外部文件,然后将SVG内联作为构建过程的一部分,这样我就可以避免沙箱操作(我目前可以做的事情),但是我也想通过选择器动态应用数据绑定内联SVG之后(例如,与每个SVG子元素关联的ID /类)。我提出的两个解决方案是创建一个指令,该指令将执行一些DOM操作以将相对元素与我要设置的值相关联,或者在内联后的生成过程中修改SVG标签以添加Angular。这里的绑定语法。这两种选择对我来说似乎都不是一件好事。

还有我想念的另一种方法吗?