AngularJS迁移至Angular10时td元素data-link绑定报错如何解决？

原代码中data-link的作用 #

• 属于HTML标准的data-*自定义属性，用于在DOM元素上存储业务自定义数据
• 这段代码里是给每个单元格、单元格内的子元素分别绑定对应的跳转标识，点击整行触发跳转逻辑时，可以直接读取点击位置元素的data-link值，拿到对应需要传递到目标页面的参数，区分用户点击的是表格的哪个区域，从而传递不同的参数。

报错原因 #

Angular默认会将[data-link]这种绑定语法识别为组件输入属性或者DOM原生内置属性，而<td>等原生元素没有内置的data-link属性，也没有对应同名的输入指令，因此抛出“不是已知属性”的报错。 #

解决方法 #

只需要在绑定时加上attr.前缀，明确告诉Angular你要绑定的是HTML attribute而非DOM property即可，同时把原有AngularJS的语法替换为Angular 10的对应语法：

• ng-repeat替换为*ngFor
• ng-click替换为(click)
• 插值绑定{{}}在[attr.xxx]中直接写表达式即可，不需要再加双大括号

改造后的代码如下：

<tr *ngFor="let data of responseData" (click)="goToSummary(data, $event)">
    <td [attr.data-link]="data.Description">
        <span [attr.data-link]="data.Description">
            {{data.Description}}
        </span>
    </td>
    <td [attr.data-link]="data.Description + 'propA'">
        <div [attr.data-link]="data.Description + 'propA'" >{{data.propA}}</div>
        <span [attr.data-link]="data.Description + 'propA_' + 'Priority'">{{data.propACount}}</span>
    </td>
    <td [attr.data-link]="data.Description + 'propB'">
        <div [attr.data-link]="data.Description + 'propB'" >{{data.propB}}</div>
        <span [attr.data-link]="data.Description + 'propB_' + 'Priority'">{{data.propBCount}}</span>
    </td>
 </tr>

如果需要在goToSummary方法中获取点击元素的data-link值，可以通过传入的$event对象读取：

goToSummary(data: any, event: Event) {
  const targetEl = event.target as HTMLElement;
  const linkValue = targetEl.getAttribute('data-link');
  // 后续业务逻辑，携带linkValue和data参数跳转
}

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