如何修复窗口调整时CDK Menu触发的报错问题？

每次调整窗口大小都会弹出错误，修改HTML和CSS后问题仍存在，错误根源在绑定[cdkMenuTriggerFor]的按钮及对应模板上，给你几个排查修复方向：

• 确保模板引用稳定：#searchOverlay这个模板变量要保证在组件生命周期内始终可被访问，窗口resize触发DOM重排时，别让模板被意外销毁或隐藏。
• 用条件渲染规避无效绑定：如果是按窗口尺寸显示/隐藏搜索按钮，直接用*ngIf控制按钮的存在，别让隐藏状态的按钮还挂着cdkMenuTriggerFor绑定——Angular会一直尝试找对应的菜单模板，找不到就报错。示例：

  <!-- 假设断点是768px，小于这个尺寸显示按钮 -->
  <button *ngIf="window.innerWidth < 768" [cdkMenuTriggerFor]="searchOverlay" class="search-menu-btn ripple">
    <!-- 按钮图标内容 -->
  </button>
  

• 组件内手动管理菜单引用：用@ViewChild获取模板引用，在resize时动态控制绑定，避免无效引用：

  import { ViewChild, TemplateRef } from '@angular/core';
  
  // 组件类内部
  @ViewChild('searchOverlay') searchOverlay!: TemplateRef<any>;
  currentMenuTrigger: TemplateRef<any> | null = null;
  
  ngOnInit() {
    window.addEventListener('resize', () => {
      this.currentMenuTrigger = window.innerWidth < 768 ? this.searchOverlay : null;
    });
  }
  

  模板改为动态绑定：

  <button [cdkMenuTriggerFor]="currentMenuTrigger" class="search-menu-btn ripple" *ngIf="currentMenuTrigger">
    <!-- 按钮图标内容 -->
  </button>
  

• 检查CDK模块导入：确认已经把CdkMenuModule添加到你的NgModule的imports数组中，未导入的话指令会失效，也会触发异常。

你的菜单模板结构没问题，cdkMenu指令加在容器<div>上是正确的，核心就是解决窗口变化时，菜单触发器和模板之间的引用失效问题。

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