Angular元素驼峰命名属性失效，小写属性正常，求原因解析

这个问题我之前踩过坑！核心原因是原生HTML属性不区分大小写，而Angular元素作为自定义元素运行在原生HTML环境中，必须遵循原生的命名规则。

具体原因拆解： #

• 原生HTML的特性：浏览器会把所有HTML属性名自动转换成小写。你写的personName="John doe"会被浏览器解析成personname="John doe"，但你的@Input()是personName，两者名字不匹配，所以无法绑定值。
• Angular元素的属性映射规则：当Angular组件被打包成自定义元素时，框架会自动将驼峰命名的@Input()转换成短横线分隔的小写属性名（也就是kebab-case）。比如personName对应的原生HTML属性应该是person-name，而不是驼峰形式。

对比你的代码： #

原问题代码：

<!-- index.html -->
<body>
  <app-root></app-root>
  <user-poll age="25" personName="John doe"></user-poll> <!-- Angular元素 -->
</body>

// user-poll.component.ts
@Input() age: number; // 正常生效：age是全小写，和HTML属性名一致
@Input() personName: string; // 始终undefined：HTML属性被转成personname，和@Input()不匹配

修复方案： #

把HTML中的驼峰属性改成短横线分隔的形式即可：

<!-- 修正后的index.html -->
<body>
  <app-root></app-root>
  <user-poll age="25" person-name="John doe"></user-poll>
</body>

这样修改后，Angular元素就能正确识别person-name属性，并将其值绑定到personName这个@Input()上了。

总结： #

自定义元素（包括Angular元素）本质是原生HTML元素，必须遵循原生属性的命名规范——用短横线分隔单词，而不是驼峰命名。Angular会自动在驼峰@Input()和短横线属性之间做映射，只要在HTML中使用短横线形式的属性，就能正常完成值的传递。

内容的提问来源于stack exchange，提问作者Sandeep Gupta