在 angular 组件中，当点击嵌套了 `
在 Angular 模板中使用 (click)="download($event)" 绑定事件时，Angular 会将原生 DOM 事件对象传入处理函数。但由于 <mat-icon> 是 <button> 的子元素，event.target 实际指向的是 <mat-icon> 节点，而非你期望的 <button>。此时，直接访问 event.target.parentNode 可快速获取父级 <button> 元素：
download(event: MouseEvent) {
const parentButton = event.target?.parentNode as HTMLElement;
console.log('Parent button:', parentButton);
}⚠️ 注意：parentNode 返回的是直接父节点，但若未来 HTML 结构变化（例如插入了额外包装层），该方式可能失效。更推荐使用语义化、容错性更强的 event.target.closest('button')：
download(event: MouseEvent) {
const button = event.target?.closest('button') as HTMLButtonElement;
if (button) {
console.log('Clicked button element:', button);
// 可安全调用 button.classList, button.getAttribute 等方法
}
}Element.closest(selector) 会从当前元素开始向上遍历祖先链，返回第一个匹配指定 CSS 选择器的元素（含自身），兼容性良好（现代浏览器及 Angular 支持的运行环境均支持），且不依赖具体层级结构，是获取语义化“触发操作的按钮”的最佳实践。
✅ 小结：
- 避免使用“father”等非标准术语，统一使用 parent 或 ancestor；
- 优先使用 event.target.closest('button') 替代 parentNode，提升代码鲁棒性；
- 始终进行类型断言或空值检查（如 ?. 和 as HTMLButtonElement），避免运行时错误。
