Question

我希望能够使用mat-menu动态创建菜单项。这个演示代码说明了我尝试做的简化示例：

<mat-toolbar color="primary">
  Menu Navigation Order Demo
</mat-toolbar>
<mat-menu #theMenu yPosition="below" [overlapTrigger]="false">
  <div *ngIf="addedItems">
    <button mat-menu-item>Item A</button>
    <button mat-menu-item>Item B</button>
  </div>
  <button mat-menu-item>Item C</button>
  <div *ngIf="addedItems">
    <button mat-menu-item>Item D</button>
    <button mat-menu-item>Item E</button>
  </div>
</mat-menu>
<button [matMenuTriggerFor]="theMenu">
  Click Here
</button>

这样可以使所有菜单项按要求显示，但问题是键盘导航。我希望（并且用户会期望）键盘导航按照您看到屏幕上显示的菜单项的顺序。

问题在于添加项目的顺序会影响导航顺序，如此演示中所示：https://stackblitz.com/edit/angular-material2-issue-gxemkt

如果反复按向下箭头导航菜单项，焦点从项目A转到项目B，然后跳过项目C转到D，然后跳到E，最后回到最初跳过的项目C. / p>

有没有办法控制键盘导航顺序，以便这种奇怪的行为不会发生？

如何在Angular Material mat-menu

0 个答案: