Material Nested TreeNode点击事件无响应，添加内部按钮是否为唯一最优方案

核心结论 #

• 内部添加button不是唯一方案，也不是所有场景下的最优方案，你当前的问题只需要调整事件绑定位置即可快速修复
• 添加button是官方推荐的可访问性友好的最优实践，适合需要合规的商用场景

问题根因 #

你当前的代码不生效是因为事件绑定位置错误：
普通mat-tree-node的matTreeNodeToggle指令和(click)事件绑定在同一个元素上，事件可以正常触发；
而mat-nested-tree-node作为容器元素，你将matTreeNodeToggle绑在了它内部的子div上，子元素处理点击事件时会阻止冒泡到父级的mat-nested-tree-node，所以绑在根节点的click事件无法触发。

可选解决方案 #

方案1：调整事件绑定位置（改动最小，无额外元素） #

直接将mat-nested-tree-node上的(click)="selectednode = node"移动到内部带matTreeNodeToggle的div.mat-tree-node元素上即可，和普通树节点的绑定逻辑对齐，修改后代码片段如下：

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <!-- 点击事件移到此处 -->
  <div class="mat-tree-node" matTreeNodeToggle (click)="selectednode = node" (contextmenu)="onRightClick($event)" 
    [ngClass]="{ 'background-highlight':selectednode === node  }">
    <mat-icon class="folder-icon-spacing" fontSet="far"
      [fontIcon]="treeControl.isExpanded(node) ? 'fa-folder-open' : 'fa-folder'">
    </mat-icon>
    <mat-icon class="mat-icon-rtl-mirror chevron-color">
      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
    </mat-icon>
    <div class="node-format item-font">
      {{node.sectionTitle}} </div>
    <div class="align-setproperties item-font" (click)="showProperties(node)">Set Properties</div>
  </div>
  <!-- 其余代码保持不变 -->
</mat-nested-tree-node>

这个方案适合内部使用、不需要严格无障碍合规的场景，改造成本最低。

方案2：添加button元素（官方推荐最优实践） #

如果你的产品需要符合无障碍（WCAG）规范，添加button是最优方案，原生button自带键盘导航、焦点状态、回车/空格触发等无障碍特性，不需要额外手动适配。你只需要把节点的可点击区域用button包裹即可，不需要完全重写结构。

方案3：手动模拟button无障碍属性 #

如果不想加额外的button元素，又需要无障碍支持，可以给绑定点击事件的div添加以下属性：

• role="button" 声明元素为按钮角色
• tabindex="0" 允许元素获得焦点
• 绑定keydown事件，处理回车和空格按键触发点击逻辑
  这个方案可以达到和加button一样的效果，但是需要额外写事件处理代码，成本比加button高。

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