Angular：点击事件处理中优雅获取nativeElement及属性的方法

你说得对，直接访问_elementRef这种私有属性确实是不太规范的取巧方式——Angular里带下划线的属性通常是框架内部私有实现，后续版本可能会变动，依赖它会让代码变得脆弱。而且这种操作DOM的方式也不符合Angular数据驱动的设计理念，下面给你两种更优雅的解决思路：

方案一：直接传递media对象（最推荐） #

既然你已经在*ngFor中遍历period.media，完全可以直接把当前的media对象作为参数传给点击事件，根本不需要操作DOM元素：

修改模板代码： #

<div *ngFor="let media of period.media">
  ...
  <button (click)="onDeleteClick(media)">
    {{'DELETE' | translate}}
  </button>
</div>

修改组件代码： #

this.period.media = [
  {id: 123},
  {id: 456},
  ...
];

// ...

onDeleteClick(media: {id: number}) {
  console.log(media.id); // 直接拿到ID，无需操作DOM
}

这种方式完全遵循Angular的数据驱动思路，代码更简洁、可读性更高，也避免了依赖框架内部私有属性的风险。

方案二：使用@ViewChildren合法获取元素（适用于需操作DOM的场景） #

如果你的业务场景确实需要操作按钮元素本身（比如修改样式、获取位置等），可以通过@ViewChildren结合模板引用变量来合法获取元素，而不是访问私有属性：

修改模板代码： #

<div *ngFor="let media of period.media">
  ...
  <button #deleteBtn (click)="onDeleteClick(deleteBtn)" [attr.media-id]="media.id">
    {{'DELETE' | translate}}
  </button>
</div>

修改组件代码： #

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';

// ...

@ViewChildren('deleteBtn') deleteButtons!: QueryList<ElementRef<HTMLButtonElement>>;

onDeleteClick(btn: ElementRef<HTMLButtonElement>) {
  // 合法访问nativeElement
  const mediaId = btn.nativeElement.getAttribute('media-id');
  console.log(mediaId);
}

不过还是要强调，除非确实需要操作DOM，否则方案一才是Angular开发中的最佳实践。

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