数据绑定与Angular 2&内联SVG

时间:2016-10-26 10:43:46

标签: javascript angular svg

我有一个SVG图像,其中一部分我根据API调用的响应动态更改。我改变的一个方面是SVG中不同元素的颜色,我可以通过应用不同的CSS类来稍微干净地处理。但是,我还想改变文本元素。

我目前的工作是将完整的SVG图像内联到我的组件模板中,并挑选出我希望绑定到模型的部分。但是,这意味着每当我想编辑原始SVG图像时,我需要将SVG标记复制/粘贴回模板并重新应用这些绑定。

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

还有另一种方法可以解决这个问题吗?

0 个答案:

没有答案