Angular 2：如何从ElementRef获取自定义属性myId的值

嘿，这个问题其实很简单，咱们直接说两种靠谱的方法，适配不同的场景：

方法1：使用DOM原生的getAttribute()方法 #

因为ElementRef的nativeElement属性就是对应的DOM元素实例，直接调用它的getAttribute()方法就能拿到自定义属性的值，这是最通用的方式——不管你的myId是静态写在模板里还是动态绑定的都能用。

举个代码例子：

// 假设你已经通过@ViewChildren拿到了查询列表
@ViewChildren('yourImgTemplateRef') myChildren: QueryList<ElementRef>;

// 务必在视图初始化完成后操作（比如ngAfterViewInit钩子）
ngAfterViewInit() {
  // 获取其中一个ElementRef实例，比如第一个
  const targetImg = this.myChildren.first;
  // 加空值判断避免DOM未加载导致的报错
  if (targetImg?.nativeElement) {
    // 拿到myId属性值
    const myId = targetImg.nativeElement.getAttribute('myId');
    console.log('当前图片的myId:', myId);
  }
}

方法2：适配HTML5自定义数据属性场景（可选） #

如果你后续把自定义属性改成了HTML5标准的data-myId格式（模板里写data-myId="xxx"），那还可以用dataset属性更简洁地获取：

const myId = targetImg.nativeElement.dataset.myId;

不过这只适用于带data-前缀的自定义属性，你的场景里是myId，所以还是第一种方法更直接。

关键注意点 #

• 一定要在ngAfterViewInit钩子之后去访问myChildren，因为@ViewChildren的查询结果要等到视图初始化完成后才会生成，提前访问会拿到空的QueryList。
• 记得加可选链?.或者空值判断，避免因为DOM元素未加载完成导致的报错。

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