javascript - Angular 2 - 如何将 SVG 属性数据绑定(bind)到组件属性？

Question

我正在学习 Angular 2。为此，我正在尝试创建基本示例。

我有一个包含此字符串的变量的类:M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z

我正在尝试将该字符串用作 svg 元素的参数

只是为了检查:

这个 svg 有效:

<svg fill="white" height="64" width="64">
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

模板中的变量icon 包含正确的字符串。我正在尝试这样做:

<svg fill="black" height="24" width="24">
  <path d={ icon } />
</svg>

并将 " 添加到参数 d 中。但我无法使其工作

Answer 1

您需要使用 attribute binding带有 SVG 元素:

 <path [attr.d]="icon" />