Angular 14自定义属性无法绑定（原Angular 7可正常工作）

开发者阿泽

2026-6-24

Angular 14 自定义 data 属性绑定失效解决方案

问题根源

Angular 14 默认启用严格模式，模板绑定规则比 Angular 7 更严格，同时错误的属性绑定写法会导致绑定失效：

原插值写法可能因变量访问权限问题不生效
你尝试的 [attr.data-idvalue]="{{idvalue}}" 属于重复绑定（方括号已表示属性绑定，内部无需再套插值语法）

正确绑定方式

方式1：属性绑定（推荐，符合 Angular 规范）

直接通过方括号绑定组件变量，无需额外插值语法：

<a href="javascript:void(0)" 
   [attr.data-idvalue]="idvalue"
   [attr.data-hashvalue]="hashvalue"
   [attr.data-xvalue]="xvalue"
   [attr.data-yvalue]="yvalue"
   [attr.data-titlevalue]="title"
   [attr.data-difference]="difference"
   id="cloudViewShowMore">{{MORE_INFO}}...</a>

方式2：插值写法（需确保变量权限）

如果坚持用插值，必须保证组件类中的变量为 public（严格模式下模板仅能访问公共变量）：
组件类代码示例：

export class YourComponent {
  public idvalue: string;
  public hashvalue: string;
  public xvalue: string;
  public yvalue: string;
  public title: string;
  public difference: string;
  public MORE_INFO = '更多信息';
}

模板代码保持原插值写法即可：

<a href="javascript:void(0)" 
   data-idvalue="{{idvalue}}"
   data-hashvalue="{{hashvalue}}"
   data-xvalue="{{xvalue}}"
   data-yvalue="{{yvalue}}"
   data-titlevalue="{{title}}"
   data-difference="{{difference}}"
   id="cloudViewShowMore">{{MORE_INFO}}...</a>