如何实现Angular Mat-menu页面加载时默认保持打开状态

Angular Material 原生mat-menu组件设计为交互触发式弹出层，没有提供默认展开的原生配置项，借助框架原生能力即可实现需求，不需要写复杂的自定义触发逻辑，也不会和用户后续的点击、关闭交互产生冲突。

• 模板层配置：给菜单触发器绑定模板引用变量，直接引用matMenuTrigger指令实例

<!-- 菜单触发元素 -->
<button mat-raised-button [matMenuTriggerFor]="siteMenu" #menuTrigger="matMenuTrigger">
  功能菜单
</button>

<!-- 菜单面板 -->
<mat-menu #siteMenu="matMenu">
  <button mat-menu-item>个人中心</button>
  <button mat-menu-item>系统设置</button>
  <button mat-menu-item>退出登录</button>
</mat-menu>

• 逻辑层配置：通过ViewChild拿到触发器实例，在视图渲染完成的生命周期节点调用指令自带的openMenu()方法即可，这个是官方提供的标准调用方式，不属于侵入式的业务编程触发逻辑

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

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html'
})
export class NavMenuComponent implements AfterViewInit {
  @ViewChild('menuTrigger') mainMenuTrigger!: MatMenuTrigger;

  ngAfterViewInit(): void {
    // 页面视图渲染完成后自动展开菜单
    this.mainMenuTrigger.openMenu();
  }
}

如果希望完全不在TS文件中写逻辑，也可以直接在模板中借助视图初始化事件触发，不过可读性会稍差，不推荐在生产环境使用：

<ng-container (ngAfterViewInit)="menuTrigger.openMenu()"></ng-container>

注意不要用模拟元素点击的hack方式实现自动展开，这类方式会跳过组件的部分生命周期逻辑，容易出现菜单定位偏移、关闭事件不触发的异常。

你提到的参考效果里的默认展开下拉组件，是基于mat-menu做的上层封装，把上述生命周期触发逻辑内置到了组件内部，实现原理完全一致，没有使用非公开的特殊API。

内容的提问来源于stack exchange，提问作者Santosh Prabhu Kumar