绑定后Angular2自定义属性未出现在DOM中答案

【问题标题】：Angular2 custom attribute not appearing in DOM after binding绑定后Angular2自定义属性未出现在DOM中
【发布时间】：2016-08-09 20:40:31
【问题描述】：

我正在尝试使用 Angular2 构建一个WiX 组件。

我将 WiX 自定义属性 wix-options 添加到 span，使用 Angular 的语法允许绑定（注意 {{'email' | translate}}）：

<span wix-ctrl="Input" attr.wix-options="{placeholder: {{'email' | translate}}, size: 'big'}"></span>

当我在 Chrome 中单步执行 JavaScript 代码时，该属性不会出现在元素上：

wix-ctrl 属性（未以 attr. 为前缀以允许绑定）继续出现。

如何让 Angular2 保留 DOM 中的 wix-options 属性？ WiX UI 库搜索带有wix-ctrl 标记的元素，然后读取wix-options 以获取更多信息。

【问题讨论】：

【解决方案1】：

您可能想尝试以指令方式执行此操作：

<span wix-ctrl="Input" [attr.wix-options]="{placeholder: {{'email' | translate}}, size: 'big'}"></span>

否则你必须这样做：

<span wix-ctrl="Input" attr.wix-options="{{ {placeholder: {{'email' | translate}}, size: 'big'} }}"></span>

由于您传入一个对象，Angular 不知道它是否应该解析整个事物。您也可能在开发工具中遇到错误。

【讨论】：

我实际上早先尝试过，即使我没有在问题中说明。我得到了同样的结果。顺便说一句，Angular not 似乎在解析属性值时出现问题，如图所示。我假设它使用某种模式匹配（正则表达式？）来查找{{。
我想知道是否与正在解析的顺序有关。我没有使用过 WiX，所以我不确定它是如何工作的，但我假设它会解析 -options 以创建一些自定义 DOM 对象。也许它正在尝试在 Angular 更改解析/处理它的一部分之前解析选项。
我正在使用 jquery 来尝试在不使用 Angular 绑定的情况下“注入”wix-options 属性。如果可行，我会将答案作为一个笨拙的解决方案发布，直到有人发布更好的解决方案。