Angular 6中mat-expansion-panel头部菜单按Enter键无法打开求助

我明白你遇到的问题了——鼠标交互一切正常，但键盘导航到图标按Enter时，虽然阻止了面板折叠，却没法触发菜单打开。这本质上是因为键盘事件没有被正确关联到mat-menu的打开逻辑，下面给你两种可行的解决方案，推荐优先用第二种，更符合Angular Material的设计规范：

方案一：手动绑定键盘事件并触发菜单 #

这种方案适合你不想用按钮包裹图标的场景，需要手动处理键盘事件并调用菜单的打开方法：

模板代码 #

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <span>你的面板标题</span>
    <!-- 给图标设置tabindex让它可被Tab聚焦，绑定点击和键盘事件 -->
    <mat-icon 
      matMenuTriggerFor="menu" 
      tabindex="0"
      (click)="handleMenuTrigger($event)"
      (keydown.enter)="handleMenuTrigger($event)"
      (keydown.space)="handleMenuTrigger($event)">
      more_vert
    </mat-icon>
  </mat-expansion-panel-header>

  <mat-menu #menu="matMenu">
    <button mat-menu-item>编辑</button>
    <button mat-menu-item>删除</button>
  </mat-menu>

  <p>面板展开后的描述内容</p>
</mat-expansion-panel>

组件类代码 #

import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

  handleMenuTrigger(event: Event): void {
    // 阻止事件冒泡，避免触发面板的展开/折叠逻辑
    event.stopPropagation();
    // 手动调用菜单的打开方法
    this.menuTrigger.openMenu();
  }
}

方案二：用mat-icon-button包裹图标（推荐） #

Angular Material的mat-icon-button组件自带完整的键盘交互支持（Enter/Space键触发点击），而且符合无障碍设计标准，代码更简洁：

模板代码 #

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <span>你的面板标题</span>
    <!-- 用mat-icon-button作为菜单触发器，自动支持键盘事件 -->
    <button 
      mat-icon-button 
      matMenuTriggerFor="menu"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
      (keydown.space)="$event.stopPropagation()">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-expansion-panel-header>

  <mat-menu #menu="matMenu">
    <button mat-menu-item>编辑</button>
    <button mat-menu-item>删除</button>
  </mat-menu>

  <p>面板展开后的描述内容</p>
</mat-expansion-panel>

为什么这个方案更好？ #

mat-icon-button默认就是可聚焦元素，无需手动设置tabindex；同时它已经内置了Enter/Space键触发点击的逻辑，我们只需要阻止事件冒泡，matMenuTriggerFor指令会自动处理菜单的打开，不需要额外写组件逻辑。

问题根源解释 #

之前你只阻止了事件冒泡，但键盘触发的Enter事件并没有触发mat-menu的打开逻辑——因为mat-menu默认是监听触发器的click事件，而键盘的Enter/Space需要对应的元素支持把键盘事件转化为点击行为，或者我们手动调用打开方法。上面的两种方案都解决了这个问题。

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