Angular添加自定义属性并绑定一个变量

Angular中如果使用自定义属性时使用的是H5添加的方式，那么有一个问题是，自定义属性的值是固定不变的，也就是不能绑定变量，比如下面的方式

<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)"
        data-index="i"></a>

结果是：本来需要的结果是data-index的值是i的值，但实际上这里的i没有被当成一个变量，而是一个值。

那么如果我们需要绑定一个变量的话，需要使用attr，关于attr在官网上有说明，见模板语法部分

正确的使用方式是：[attr.data-index]="i"，片段如下

 <a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)"
        [attr.data-index]="i"></a>

结果：

获取的时候通过模板引用变量获取就可以了，但是如果像我这里通过循环产生的话，获取不是很方便，可以通过在父节点使用模板引用变量，通过父获取子