角度模板绑定 - svg 数据属性答案

【问题标题】：angular template binding - svg data property角度模板绑定 - svg 数据属性
【发布时间】：2021-12-31 20:56:47
【问题描述】：

我有一个 svg（对象元素），我喜欢用 if else 语句更改数据属性的一部分。

我可以使用 ng 模板，但如果没有必要，我宁愿不使用它来保持我的代码干净。

<object class="flag me-2" data="`../../../../assets/images/lang/${currentLang === 'nl': 'en' ? 'nl'}.svg`"> </object>

正常：../../../../assets/images/lang/en.svg

我想根据 if else 语句更改“en”。

我尝试使用函数、字符串插值、绑定，但我发现它在 html 中的“对象”上不起作用

我也尝试了属性绑定 => [attr.data]="getFlag()" 该函数将完整路径作为字符串返回。

【问题讨论】：

【解决方案1】：

您必须对数据属性使用表达式绑定。像这样。

<object class="flag me-2" [attr.data]="'../../../../assets/images/lang/' + (currentLang === 'nl' ? 'nl' : 'en') + '.svg'"> </object>

这将正确构建 URL 并将其传递给数据属性，但会导致 unsafe value 出现问题，您可以通过 sanitizing the input 解决该问题。

【讨论】：