Angular 4中data-*属性绑定与滑块实现的模板解析错误问题

这种模板解析错误通常是因为你直接在模板里使用data-thumb="{{xxx}}"这类方式绑定HTML5的data属性，Angular的模板编译器不支持这种直接语法——对于自定义的data-*属性，必须通过attr.前缀来完成属性绑定。

具体解决方案 #

你只需要把模板中data-*属性的绑定方式改成Angular支持的属性绑定语法即可：

1. 替换绑定语法
   将原来的插值绑定（比如data-thumb="{{banner.image}}"）改成带attr.前缀的属性绑定：

   <!-- 推荐的属性绑定方式 -->
   [attr.data-thumb]="banner.image"
   

   如果你更习惯用插值语法，也可以写成：

   attr.data-thumb="{{banner.image}}"
   

2. 结合你的滑块组件示例
   假设你的slider.component.html里是遍历从服务获取的banner数组，完整的模板代码大概是这样：

   <div class="slider-container">
     <div *ngFor="let banner of banners" class="slider-slide">
       <!-- 正确绑定data-thumb属性 -->
       <img 
         [src]="banner.image" 
         [attr.data-thumb]="banner.image" 
         alt="{{banner.title}}"
       >
     </div>
   </div>
   

3. 额外的安全处理
   为了避免当banners数据还没加载完成时出现undefined的问题，可以加上Angular的安全导航操作符：

   [attr.data-thumb]="banner?.image"
   

为什么会报错？ #

Angular的模板系统会把不带attr.前缀的data-*属性当成组件的输入属性（@Input()）来解析，而你的组件里并没有定义对应的dataThumb输入属性，所以编译器就会抛出模板解析错误。通过attr.前缀告诉Angular这是一个HTML属性绑定，而不是组件的输入属性，就能解决这个问题。

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