如何将Angular Material菜单默认设置为展开状态？

嘿，这个需求很好实现！Angular Material的菜单组件提供了现成的方式来控制菜单的展开状态，结合你已有的代码，给你两种可行的方案：

方案一：通过组件生命周期钩子主动调用展开方法 #

你已经在模板里给菜单触发器加了#menuTrigger="matMenuTrigger"的模板引用，接下来只需要在组件类里获取这个引用，然后在视图初始化完成后调用它的openMenu()方法即可：

组件类代码修改 #

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

@Component({
  // 保持你原有的组件元数据（selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  // 获取模板里的菜单触发器引用
  @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;

  ngAfterViewInit(): void {
    // 视图初始化完成后，打开菜单
    this.menuTrigger.openMenu();
  }

  // 保留你原有的onShowVid方法
  onShowVid() {
    // 你的原有逻辑
  }
}

方案二：使用matMenuTriggerOpen输入属性直接绑定 #

这是更简洁的模板层面解决方案，直接给按钮添加[matMenuTriggerOpen]="true"属性，就能让菜单默认处于展开状态：

模板代码修改 #

<button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" 
        [matMenuTriggerFor]="vidmenu" 
        [matMenuTriggerOpen]="true" <!-- 新增这行，绑定true默认展开 -->
        matTooltip="Watch videos" 
        class="toolbar-btn" 
        (click)="onShowVid()"> 
  <mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon> 
</button> 

<mat-menu #vidmenu="matMenu"> 
  <button mat-menu-item> 
    <img src="assets/images/vid_welcome.jpg" height=40px/> 
    <!-- 你的其他菜单项内容 -->
  </button>
</mat-menu>

如果之后需要动态控制菜单的展开/收起，你可以把true换成组件里的布尔变量（比如[matMenuTriggerOpen]="isMenuOpen"），然后在组件类里修改这个变量的值就能实现状态切换啦。

注意：如果用方案一，一定要在ngAfterViewInit钩子中调用openMenu()，这时候视图已经完全初始化，能确保触发器引用可以被正确获取到，避免出现未定义的错误。

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