Typescript 按下键时菜单未打开。当在角6中的垫子扩展面板标题内使用时,请输入

Typescript 按下键时菜单未打开。当在角6中的垫子扩展面板标题内使用时,请输入,typescript,angular6,angular-material-6,event-propagation,Typescript,Angular6,Angular Material 6,Event Propagation,我正在使用mat菜单和mat扩展面板,其中有一个扩展面板,我将mat图标放在扩展面板标题的末尾,单击此图标将打开一个菜单项。单击扩展面板的标题,打开面板说明。这是期望的行为,这是使用鼠标点击工作 但当我通过键向下导航到图标时,情况就不一样了。使用tab键,当我将tab键定位到图标并按enter键时,它正在折叠面板。不知何故,我使用event.stopPropagation和返回false修复了它。但按下图标上的enter键时,它不会打开菜单项。这里是stackblitz链接。请帮我解决这个问题。

我正在使用mat菜单和mat扩展面板,其中有一个扩展面板,我将mat图标放在扩展面板标题的末尾,单击此图标将打开一个菜单项。单击扩展面板的标题,打开面板说明。这是期望的行为,这是使用鼠标点击工作


但当我通过键向下导航到图标时,情况就不一样了。使用tab键,当我将tab键定位到图标并按enter键时,它正在折叠面板。不知何故,我使用event.stopPropagation和返回false修复了它。但按下图标上的enter键时,它不会打开菜单项。这里是stackblitz链接。请帮我解决这个问题。提前感谢。

您的按钮应该是触发器,而不是图标:

<span class="export-to-csv-span">
  <button mat-button variant="icon-button"
      [matMenuTriggerFor]="exportAsMenu"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
      (keydown.space)="$event.stopPropagation()">
    <mat-icon>vertical_align_bottom</mat-icon>
  </button>
</span>