在 Angular 中，若需仅为测试或 DOM 标识目的向子组件动态添加原生 HTML 属性（而非作为 @Input() 输入），应使用 [attr.*] 语法，而非插值或属性绑定，避免“Unknown property”错误。
在 angular 中，若需仅为测试或 dom 标识目的向子组件动态添加原生 html 属性（而非作为 `@input()` 输入），应使用 `[attr.*]` 语法，而非插值或属性绑定，避免“unknown property”错误。
Angular 的模板绑定机制严格区分不同类型的属性：
-
{{ variable }}是插值语法，仅适用于文本节点内容，不能用于设置元素属性； -
[test]="variable"是属性绑定，要求test必须是组件声明的@Input()或原生 DOM 属性（如id、class），否则会报错Can't bind to 'test' since it isn't a known property； - 而
[attr.test]="variable"明确告诉 Angular：将variable的值作为原生 HTML 属性（attribute）写入渲染后的 DOM 元素，无需组件支持，也不触发输入绑定逻辑。
✅ 正确用法示例：
<code class="html"><child-component [attr.test]="myTestValue" [attr.data-testid]="testId"></child-component></code>
假设 myTestValue = 'demo-123'，渲染结果为：
<code class="html"><child-component test="demo-123" data-testid="login-button"></child-component></code>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
attr.绑定的是 HTML attribute（可通过element.getAttribute('test')获取），而非 DOM property（如element.test通常为undefined）； - 若值为
null或undefined，该属性将被自动移除（这是 Angular 的默认行为，符合语义化）； - 不要混用
[attr.test]和test="{{value}}"——后者在 Angular 模板中无效且会被忽略； - 该方式适用于所有自定义属性（如
data-*、aria-*、或测试专用属性如test、qa-id），是 E2E 测试和 DOM 定位的推荐实践。
总结：当目标只是向最终 DOM 添加一个动态 HTML 属性（无业务逻辑耦合、不涉及子组件输入），请始终优先使用 [attr.xxx] 绑定语法——简洁、安全、标准兼容。
