javascript - Angular 2 如何使用驼峰命名法处理属性

Question

我一直在致力于一个 Web 组件的宠物项目。我正在尝试自己的数据绑定(bind)库。到目前为止，我成功地创建了通常用于 Angular 2 模板的所有基本功能，即 Web 组件的 if、for、类和数据输入。到目前为止，我遇到的一个限制是 html 属性名称被浏览器标准化为小写。

所以当你我使用时:

var attribute = element.getAttribute(attributeName);

我将在 attribute.nodeName 中收到原始 attribute.nodeValue。这意味着我当前的语法不是最好看的语法，因为我使用属性值在原始情况下存储源属性名称。

p-data="mockDataProp，customInput"

我想要这样的东西

(mockDataProp)="customInput"

但是我在nodeName属性中得到的是mockdataprop。到目前为止，我唯一的想法是使用类似于 AngularJS 的属性规范化。烤肉串箱到 Camel 箱。另一种方法是使用 innerHTML 的包装器并使用正则表达式......我怀疑这不是那么明智。

有什么想法吗？

Answer 1

我不确定 Angular 是如何做到这一点的，但我确实知道属性总是小写的。尝试使用类似 el.innerHTML='<b myAttr="true">b</b>'; 的内容或el.setAttribute('myAttr', 'true');并且属性将转换为小写。

许多库所做的就是将破折号大小写转换为驼峰式大小写，以使它们获得大写属性名称。所以'my-attr'将变成'myAttr'和'inner-h-t-m-l'变成'innerHTML'

这是一个从虚线大小写转换为驼峰大小写的简单例程: How do I convert from camel case to dashed and dashed to camel case