如何在 Angular 中通过事件获取按钮的父元素

在 angular 中处理按钮点击事件时，若需从子元素（如 mat-icon）反向获取其父级 button 元素，应使用 `event.target.parentnode`，而非 `event.target` 本身——因为事件实际触发于子元素，需向上遍历 dom 树定位目标父节点。

在你提供的 HTML 结构中：

  download_for_offline

点击行为实际由 触发（因其位于按钮内部且可交互），因此 event.target 指向的是 元素，而非外层 。要获取该按钮，最直接的方式是访问其父节点：

download(event: MouseEvent) {
  const parentButton = event.target?.parentNode as HTMLElement;
  console.log('Parent button:', parentButton);
}

✅ 推荐写法（增强健壮性）：
为避免 event.target 为 null 或 parentNode 不存在导致运行时错误，建议添加类型守卫和空值检查：

download(event: MouseEvent) {
  const target = event.target as HTMLElement | null;
  const parentButton = target?.parentNode as HTMLButtonElement | null;

  if (parentButton && parentButton.tagName === 'BUTTON') {
    console.log('Found parent button:', parentButton);
    // 可进一步调用原生方法，例如 parentButton.click() 或读取属性
  } else {
    console.warn('Parent element is not a button or unavailable');
  }
}

⚠️ 注意事项：

• 不要使用 event.currentTarget 替代 parentNode —— currentTarget 指向绑定事件监听器的元素（即 ），看似更简单，但存在风险：若未来模板结构变化（如事件绑定到 上），currentTarget 将不再等价于“期望的父按钮”，而 parentNode 更具语义明确性与结构依赖可控性；
  避免使用 event.target.parentElement 代替 parentNode？二者在绝大多数场景下结果一致，但 parentElement 仅返回元素节点（忽略文本/注释节点），更安全；推荐优先使用 parentElement：

  const parentButton = event.target?.parentElement as HTMLButtonElement | null;

  ? 总结：
  在 Angular 模板中，当事件委托至嵌套子组件（如 mat-icon）时，event.target.parentNode（或更佳的 parentElement）是精准获取结构上一级父元素的标准方式。命名上请统一使用 “parent” 而非 “father”，符合 DOM 规范与团队协作惯例。