启用严格模式及更多编译标志时使用MatMenuTrigger的问题

核心误区纠正 #

你不需要手动调用MatMenuTrigger的构造函数来创建实例——@ViewChild的作用是获取Angular已经在模板中自动创建并注入好的指令实例，构造函数的参数会由Angular的依赖注入系统自动处理，完全不需要你手动传入。

正确使用步骤 #

1. 模板中声明MatMenuTrigger实例
   首先在组件模板里添加带matMenuTriggerFor指令的元素，并给它设置模板引用变量（比如#contextMenuTrigger）：

   <!-- 触发按钮，绑定菜单并设置模板引用 -->
   <button 
     [matMenuTriggerFor]="contextMenu" 
     #contextMenuTrigger="matMenuTrigger"
   >
     打开右键菜单
   </button>
   
   <!-- 菜单本身 -->
   <mat-menu #contextMenu="matMenu">
     <button mat-menu-item>查看详情</button>
     <button mat-menu-item>编辑</button>
   </mat-menu>
   

2. 组件中通过@ViewChild获取实例
   在组件类里用@ViewChild关联模板中的引用变量，严格模式下明确指定类型即可：

   import { Component, ViewChild } from '@angular/core';
   import { MatMenuTrigger } from '@angular/material/menu';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent {
     // 关联模板中的#contextMenuTrigger引用
     @ViewChild('contextMenuTrigger') contextMenu: MatMenuTrigger;
   
     // 示例：触发菜单
     openContextMenu(event: MouseEvent) {
       event.preventDefault();
       // 直接使用已获取的实例
       this.contextMenu.openMenu();
     }
   }
   

Strict模式下的额外注意事项 #

• 由于开启了strict和noImplicitAny，必须明确指定@ViewChild的类型（这里是MatMenuTrigger），不能省略类型声明。
• 如果需要在组件初始化阶段（比如ngOnInit）使用实例，需要给@ViewChild添加{ static: true }配置；如果在视图初始化后使用（比如ngAfterViewInit），使用默认的{ static: false }即可，避免出现undefined。

特殊场景：手动创建实例（不推荐） #

如果确实有动态创建菜单的特殊需求，不要直接手动传构造函数参数，而是通过Angular的Injector来自动解析依赖：

import { Component, Injector } from '@angular/core';
import { MatMenuTrigger, ViewContainerRef, TemplateRef } from '@angular/material/menu';

@Component({
  // ...
})
export class YourComponent {
  constructor(private injector: Injector) {}

  createDynamicMenuTrigger() {
    // 通过注入器获取构造函数所需的依赖
    const viewContainerRef = this.injector.get(ViewContainerRef);
    const templateRef = this.injector.get(TemplateRef);
    // 其他依赖同理，由Injector自动注入
    const trigger = new MatMenuTrigger(viewContainerRef, templateRef, /* 其他依赖 */);
  }
}

⚠️ 注意：这种方式非常少见，因为MatMenuTrigger是和模板绑定的指令，手动创建会脱离Angular的生命周期管理，大概率会导致异常，优先使用模板+@ViewChild的标准方案。

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