Angular中使用*ngIf时CDK Overlay触发按钮编译报错问题

原因 #

当给带有#trigger模板引用的按钮添加*ngIf后，Angular的严格模板类型检查会判定该模板变量可能在DOM中不存在（当accessMenu为false时）。如果模板中直接调用trigger的方法，或者组件类中未通过@ViewChild正确声明trigger属性，编译器会误以为你在引用组件类上不存在的trigger属性，从而抛出该错误。

解决方法 #

• 正确声明组件类中的触发器引用
  在组件类中通过@ViewChild获取模板引用，并声明为可选类型，适配元素动态渲染的场景：

  import { ViewChild, Component } from '@angular/core';
  import { MatMenuTrigger } from '@angular/material/menu';
  
  @Component({
    // 组件元数据（选择器、模板路径等）
  })
  export class MyComponent {
    accessMenu = false;
    @ViewChild('trigger', { static: false }) trigger?: MatMenuTrigger;
  }
  

• 模板中安全调用触发器方法
  若模板里直接调用trigger的方法（比如打开菜单），使用安全导航操作符?.避免元素未渲染时的错误，同时明确指定引用类型：

  <button 
    *ngIf="accessMenu"
    mat-button 
    [matMenuTriggerFor]="menu" 
    #trigger="matMenuTrigger"
    (click)="trigger?.openMenu()"
  >
    打开菜单
  </button>
  
  <mat-menu #menu="matMenu">
    <button mat-menu-item>选项1</button>
    <button mat-menu-item>选项2</button>
  </mat-menu>
  

• 确保ng-container包裹时的引用正确性
  用ng-container包裹时，要把#trigger绑定在按钮上（而非ng-container），因为ng-container不会生成DOM元素，无法承载MatMenuTrigger指令：

  <ng-container *ngIf="accessMenu">
    <button 
      mat-button 
      [matMenuTriggerFor]="menu" 
      #trigger="matMenuTrigger"
      (click)="trigger?.openMenu()"
    >
      打开菜单
    </button>
  </ng-container>
  

• 临时关闭严格模板检查（不推荐）
  若需快速临时解决，可在tsconfig.json中关闭严格模板类型检查，但这会隐藏其他潜在类型问题，不建议长期使用：

  {
    "angularCompilerOptions": {
      "strictTemplates": false
    }
  }
  

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