本文介绍如何在 Angular 模板中为自定义子组件动态添加原生 HTML 属性（如 test），无需声明 @Input()，仅用于测试或 DOM 标识等场景。核心方法是使用 [attr.xxx] 语法实现属性插值。
本文介绍如何在 angular 模板中为自定义子组件动态添加原生 html 属性（如 `test`），无需声明 `@input()`，仅用于测试或 dom 标识等场景。核心方法是使用 `[attr.xxx]` 语法实现属性插值。
在 Angular 中，当你尝试以 <child-component test="{{variable}}"></child-component> 的方式直接写入属性时，Angular 会将其解析为属性绑定（Property Binding），并试图查找 ChildComponent 类中名为 test 的 @Input() 输入属性——若未定义，便会抛出错误：Can't bind to 'test' since it isn't a known property。
✅ 正确做法是使用 attr. 前缀语法，明确告知 Angular：这不是组件输入，而是要渲染到最终 DOM 元素上的原生 HTML 属性：
<code class="html"><child-component [attr.test]="variable"></child-component></code>
该写法会在渲染后的 DOM 中生成类似如下结构（假设 variable = 'demo-123'）：
<code class="html"><child-component test="demo-123"></child-component></code>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
[attr.xxx]绑定的是静态属性（attribute），而非组件属性（property）。它适用于data-*、aria-*、自定义测试标识（如test、e2e-id）等场景； - 若
variable为null或undefined，Angular 默认会移除该属性（这是预期行为）；如需强制保留空字符串，可改用[attr.test]="variable || ''"； - 不要与
[test]="variable"（绑定到@Input() test）或test="{{variable}}"（非法模板语法）混淆； - 此方式不触发
ChildComponent的任何逻辑，纯属 DOM 层面操作，对单元测试（如通过By.css('[test="..."]')查询）和 E2E 测试非常友好。
? 小结：当只需向子组件宿主元素注入动态 HTML 属性、且不希望/不需要在组件类中定义 @Input() 时，[attr.xxx] 是简洁、标准、无侵入的最佳实践。
