Angular属性绑定target与attr.target区别详解

使用 attr 前缀的属性绑定 [attr.target]="target"

第二种写法增加了 attr. 前缀，表面上多了一个步骤，但实际上是明确告知 Angular：此处绑定的目标是 HTML 的 attribute，而非 DOM 的 property。例如：

这里绑定的是 HTML 的 target 属性。关键区别在于：当绑定的值为 null 或 undefined 时，此 HTML 属性会从元素上彻底删除。这一特性对某些可选属性非常有用，比如 disabled、readonly——你期望在条件不满足时属性完全消失，而不是保留一个空值。此外，像 aria-*、data-* 这类自定义 HTML 属性往往没有对应的 DOM property，因此只能通过 attr. 前缀进行绑定。

在大多数常见场景下，这两种写法确实可以互相替换，但理解它们底层的差异能帮助你在实际编码时做出更精准的选择。

那么问题来了：何时应该选用哪种方式？

一条简单的原则：如果你需要绑定的属性是常见的 DOM property（例如 src、href、id），直接使用方括号绑定即可，这种方式性能最优，心智负担也最小。如果你需要绑定的是 HTML 属性（attribute），尤其是那些具有特殊行为或没有对应 DOM property 的属性（比如 aria-label、data-xxx），那就必须使用 attr. 前缀。

另外需注意：属性命名必须严格遵循 HTML 规范，避免与组件内部的已有属性或指令重名，否则可能会导致绑定失败或产生意外的结果。

总结

归根结底，两种写法的核心区别在于“绑定的目标”不同：第一种绑定的是 DOM 属性（property），第二种绑定的是 HTML 属性（attribute）。Angular 对这两者的处理逻辑截然不同——HTML 属性负责初始化 DOM 属性，而 DOM 属性才是真正控制元素行为的关键。在大多数情况下两种写法效果一致，但当遇到没有对应 DOM property 的属性（例如 colspan），或者需要精确控制属性移除的场景时，attr. 前缀就是不可或缺的选择。

选对绑定方式，既能避开潜在的陷阱，也能写出更加优雅、可维护的 Angular 代码。