如何让Mat-menu打开时默认聚焦自定义菜单项（如第3项）

要实现MatMenu打开时聚焦指定菜单项，你可以通过绑定菜单的opened事件，结合ViewChild/ViewChildren获取目标元素并调用焦点方法，具体步骤如下：

方法一：固定聚焦指定项 #

1. 模板修改 #

给目标菜单项添加模板引用变量，并给<mat-menu>绑定opened事件：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" (opened)="focusTargetItem()">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item #targetItem>Item 3</button>
  <button mat-menu-item>Item 4</button>
</mat-menu>

2. 组件类实现 #

通过ViewChild获取目标元素，在事件触发时调用focus()：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-menu-example',
  templateUrl: './menu-example.component.html'
})
export class MenuExampleComponent {
  @ViewChild('targetItem') targetItem!: ElementRef<HTMLElement>;

  focusTargetItem(): void {
    this.targetItem.nativeElement.focus();
  }
}

方法二：动态聚焦指定索引项 #

如果需要根据变量动态选择聚焦项，可使用ViewChildren获取所有菜单项：

1. 模板修改 #

给所有菜单项添加统一的模板引用变量，事件中传入目标索引：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" (opened)="focusMenuItem(2)"> <!-- 第3项对应索引2（从0开始） -->
  <button mat-menu-item #menuItems>Item 1</button>
  <button mat-menu-item #menuItems>Item 2</button>
  <button mat-menu-item #menuItems>Item 3</button>
  <button mat-menu-item #menuItems>Item 4</button>
</mat-menu>

2. 组件类实现 #

通过ViewChildren获取菜单项列表，转成数组后根据索引聚焦：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-menu-example',
  templateUrl: './menu-example.component.html'
})
export class MenuExampleComponent {
  @ViewChildren('menuItems') menuItems!: QueryList<ElementRef<HTMLElement>>;

  focusMenuItem(index: number): void {
    const items = this.menuItems.toArray();
    if (items[index]) {
      items[index].nativeElement.focus();
    }
  }
}

原理说明：当MatMenu触发opened事件时，菜单已经完成渲染，此时调用目标元素的focus()方法，会自动触发Material菜单的高亮样式，达到聚焦指定项的效果。

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