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

最新推荐文章于 2022-03-22 18:17:18 发布

不要葱花

最新推荐文章于 2022-03-22 18:17:18 发布

阅读量7.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular 自定义属性

本文链接：https://blog.youkuaiyun.com/moqiuqin/article/details/98730433

Angular 专栏收录该内容

15 篇文章

订阅专栏

在Angular中，使用H5方式添加的自定义属性无法直接绑定变量。为解决此问题，可以利用Angular的属性绑定语法，如`[attr.customAttr]="var"`。正确示例：`<div [attr.data-item]="item.id"></div>`。当需要在循环中使用并获取这些自定义属性时，若直接通过模板引用变量不方便，可以考虑在父组件中通过模板引用变量访问子组件来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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