angular里使用svg xlink:href数据显示

前言

在angular里面使用阿里图标的svg显示图标，图标是通过接口返回，需要xlink:href的数据是动态化的，直接使用{{}}后发现报错，错误写法如下：

<svg class="icon" aria-hidden="true"><use xlink:href="{{icon}}"></use></svg>

<svg class="icon" aria-hidden="true"><use [xlink:href]="icon"></use></svg>

正文

angular的属性需要加上attr，正确写法如下：

写法一：

<svg class="icon" aria-hidden="true"><use attr.xlink:href="{{icon}}"></use></svg>

写法二：

<svg class="icon" aria-hidden="true"><use [attr.xlink:href]="icon"></use></svg>