Angular中无显式事件绑定的可点击元素如何处理点击事件？

你看到的是Angular编译后的DOM结构，原组件里的事件绑定不会直接出现在最终HTML里，主要有这几种常见实现方式：

• 模板事件绑定：原组件模板里大概率给<div>或<a>加了(click)="处理函数()"这类Angular专属的事件绑定，比如(click)="logout()"。这种绑定是Angular框架内部处理的，编译后不会在DOM上留下onclick这类属性，只会保留样式和框架标识（比如_ngcontent-kkl-c57）。

• 自定义指令绑定事件：如果这个元素用了自定义指令（比如tss-icon可能是指令，或者外层有其他指令），指令的TS代码里可能通过@HostListener('click')或者Renderer2.listen()来监听点击事件，逻辑封装在指令内部，DOM上也看不到显式的事件属性。

• 上层组件的事件委托：可能有父组件/祖先组件通过HostListener监听了子元素的点击事件，或者用全局事件监听来捕获这个元素的点击，这种情况同样不会在目标元素上留下痕迹。

给你个新手排查方向：

1. 借助Angular DevTools定位这个元素所属的组件；
2. 查看组件的模板文件，找是否有(click)这类事件绑定；
3. 检查组件TS代码里有没有@HostListener相关逻辑；
4. 确认元素上的属性（比如那些_ngcontent前缀的标识）对应的组件/指令，查看其内部实现。

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