Angular中点击div时如何获取并传递对应div的ID值

Angular中不推荐使用getElementById这类原生DOM操作获取标识，优先通过数据绑定或事件传参的方式实现，以下是3种常用实现方式：

• 方案1：直接显式传递ID（最直观，适合静态div场景）
  直接给每个div设置ID，点击时把ID作为参数传入函数即可，无需操作事件对象：

  <!-- 模板代码 -->
  <div (click)="ToBank('div1')"></div>
  <div (click)="ToBank('div2')"></div>
  <div (click)="ToBank('div3')"></div>
  

  // 组件逻辑代码
  ToBank(divId: string) {
    // 直接获取到点击的div ID
    console.log('当前点击的div ID：', divId);
  }
  

• 方案2：通过事件对象获取ID（适合不想手动传参的场景）
  注意模板中要传入$event而不是自定义的e变量：

  <!-- 模板代码，给每个div设置对应ID -->
  <div id="div1" (click)="ToBank($event)"></div>
  <div id="div2" (click)="ToBank($event)"></div>
  <div id="div3" (click)="ToBank($event)"></div>
  

  // 组件逻辑代码
  ToBank(event: MouseEvent) {
    // 使用currentTarget可以避免div内部有子元素时target指向子元素的问题
    const targetDiv = event.currentTarget as HTMLElement;
    const divId = targetDiv.id;
    console.log('当前点击的div ID：', divId);
  }
  

• 方案3：循环生成div（适合div数量多、动态生成的场景）
  把所有ID存到数组中，通过*ngFor循环渲染div，不用重复写冗余代码：

  // 组件逻辑代码中先定义ID列表
  divIdList: string[] = ['div1', 'div2', 'div3'];
  

  <!-- 模板代码循环渲染 -->
  <div 
    *ngFor="let divId of divIdList"
    [id]="divId"
    (click)="ToBank(divId)"
  ></div>
  

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