Angular：mat-tab内嵌入mat-list-item的按钮无法触发click事件

排查思路 #

• 先确认点击区域是否被遮挡：打开浏览器开发者工具的元素选择器，直接点击button3的可视位置，查看选中的元素是否是button本身。如果选中的是上层的mat-list-item、div[mat-line]或者其他覆盖元素，说明存在元素遮挡。同时检查你自定义的transition-list-even、transition-list-odd类是否意外设置了pointer-events: none属性。
• 检查事件冒泡拦截：mat-list-item如果被全局配置了可交互属性、或者本身绑定了点击事件做了冒泡阻止，会吃掉子元素的点击事件。可以先给button3的点击事件加停止冒泡逻辑测试，修改为(click)="foobar(); $event.stopPropagation()"。
• 确认变更检测与渲染正常：mat-tab默认采用惰性加载，确认第三个tab激活时transitions数组已正常赋值，button3确实被渲染到DOM节点中。可以在foobar方法首行添加console.log('点击触发')，排除是方法内部逻辑未执行而非点击事件没触发的情况。
• 检查flex布局截断：你使用了flex布局，检查button3的父容器是否设置了overflow: hidden、flex-shrink属性导致按钮的可点击区域被截断，可以临时给button加背景色查看实际可点击区域的大小。

常见解决方法 #

• 绝大多数这类问题是层级导致的，直接给button3添加层级样式即可：

<button mat-button style="position: relative; z-index: 10;" (click)="foobar()">button3</button>

• 如果是mat-line默认样式导致的层级问题，可以去掉div上的mat-line属性，自己实现行布局逻辑，绕开Angular Material自带的列表样式限制。
• 如果是事件冒泡导致的，保留$event.stopPropagation()的写法即可。

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