Angular自定义组件输入属性：带连字符是否合规？兼询最佳实践

1. max-length写法是否符合HTML标准？ #

从纯HTML规范角度，这种写法不符合标准。HTML仅认可带有data-前缀的自定义属性为合法的扩展属性，不带前缀的max-length属于非标准自定义属性——虽然浏览器不会报错，Angular也能通过自身的模板解析机制识别并映射到组件输入，但它并不在HTML的官方规范范围内。

2. data-max-length写法的合规性 #

添加data-前缀后的data-max-length写法完全符合HTML标准。HTML明确允许开发者通过data-*系列属性添加自定义数据属性，浏览器会正确解析，同时Angular也能正常绑定对应的输入属性，没有兼容性问题。

3. 遵循Angular无输入别名最佳实践的处理方案 #

Angular官方确实推荐避免给输入属性设置别名，核心目的是保持组件类内部属性名与模板使用的属性名逻辑一致，提升代码可读性和可维护性。可以通过两种方式兼顾规范与需求：

方案一：利用Angular自动驼峰映射（推荐） #

• 组件类中直接用驼峰命名定义输入属性，不设置别名：

@Input() maxLength: number;

• 模板中直接使用短横线分隔的属性名，Angular会自动将max-length映射到maxLength属性：

<!-- 插值绑定 -->
<my-component max-length="{{lengthValue}}"></my-component>
<!-- 属性绑定 -->
<my-component [max-length]="lengthValue"></my-component>

这种写法是Angular官方认可的常规用法，虽然模板中的max-length仍属于非标准HTML属性，但在Angular项目中被广泛接受，且不会引发任何兼容性问题，同时完全遵循了无别名的最佳实践。

方案二：严格遵循HTML标准（带data-前缀） #

如果需要完全符合HTML标准，同时不使用输入别名：

• 组件类中定义带data前缀的驼峰属性：

@Input() dataMaxLength: number;

• 模板中使用data-max-length属性，Angular会自动映射到dataMaxLength：

<my-component data-max-length="{{lengthValue}}"></my-component>
<my-component [data-max-length]="lengthValue"></my-component>

这种写法完全符合HTML规范，也遵循了无别名的最佳实践，唯一的小缺点是组件类的属性名会带有data前缀，略显冗长。

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