Angular文本插值为何在非默认属性上失效？

现象原因解析 #

你遇到的属性被移除问题，核心在于Angular模板编译器对文本插值（{{}}）的处理规则：

• 文本插值仅会保留对应元素原生HTML规范支持的属性。当你在元素不原生支持的属性上使用插值时，编译阶段该属性会被直接过滤移除。
• 对于自定义属性（包括data-*系列），静态赋值时浏览器本身支持这类属性，Angular不会干预；但如果用插值动态赋值，Angular会将其视为“非原生合法属性”，因此被移除。

结合你的示例逐一说明：

• <img src="{{'test'}}">：img原生支持src属性，插值被正常解析，属性保留。
• <span src="{{'test'}}">：span不原生支持src属性，插值后属性被编译器移除。
• <span data-test="test">：静态自定义属性，浏览器直接支持，Angular不做处理，属性保留。
• <span data-test="{{'test'}}">：动态插值的自定义属性，Angular未将其纳入原生合法属性范围，因此被移除。
• <span [attr.data-test]="'test'">：显式使用[attr.*]属性绑定语法，告诉Angular要手动设置该属性，因此正常渲染到DOM。

插值与属性绑定的选择及性能差异 #

生效场景 #

• 文本插值：仅适用于元素原生支持的属性、文本内容（如<p>{{content}}</p>），写法简洁但场景受限。
• 属性绑定：适用于所有属性（原生属性、自定义属性、data-*属性），无场景限制，是动态设置自定义属性的唯一合法方式。

性能差异 #

Angular在编译阶段会自动将文本插值转换为对应的属性绑定（比如src="{{value}}"会被编译成[src]="value"），因此二者在运行时性能几乎没有差异。选择哪种写法主要取决于场景需求和个人习惯。

总结建议 #

1. 元素原生属性的动态赋值：两种写法均可，优先选你觉得简洁的插值。
2. 自定义属性（包括data-*）的动态赋值：必须使用[attr.*]属性绑定，不能用插值。
3. 静态自定义属性：直接写死值即可，无需使用插值或绑定。

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