Angular 5中Kendo UI Grid单元格模板内mat-menu无法关闭

这个问题我之前在项目里也遇到过，结合Angular Material和Kendo Grid的时候确实容易踩这种DOM挂载和上下文的坑，给你几个针对性的解决方案：

1. 先修正菜单项的基础结构，确保Mat Menu能识别可点击项 #

很多时候菜单点击不关闭，是因为菜单项没有用mat-menu-item指令——Mat Menu依赖这个指令来绑定点击关闭的逻辑。同时要确保触发按钮和菜单的关联正确：

<kendo-grid-column *ngIf="shouldCreate" title="Menu">
  <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
    <!-- 明确的触发按钮，绑定matMenuTriggerFor -->
    <button mat-icon-button [matMenuTriggerFor]="actionMenu">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #actionMenu="matMenu" [overlapTrigger]="false">
      <div class="action-menu">
        <!-- 必须添加mat-menu-item指令 -->
        <a mat-menu-item 
           *ngFor="let action of yourActionList" 
           (click)="onActionClick(action, dataItem)">
          {{ action.label }}
        </a>
      </div>
    </mat-menu>
  </ng-template>
</kendo-grid-column>

2. 解决Mat Menu的DOM挂载丢失问题 #

Kendo Grid的单元格在滚动、分页或者数据更新时会被销毁重建，而Mat Menu的面板默认挂载在<body>的cdk-overlay-container里，有时候会被Grid的DOM回收机制影响，导致DevTools里找不到节点。你可以通过两种方式处理：

方法一：强制菜单挂载到稳定的容器

在组件里注入OverlayContainer，把菜单的挂载容器指定为Grid的父容器，避免被意外销毁：

import { Component, OnInit, ElementRef } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-grid-component',
  templateUrl: './your-grid-component.component.html'
})
export class YourGridComponent implements OnInit {
  constructor(
    private overlayContainer: OverlayContainer,
    private el: ElementRef
  ) {}

  ngOnInit(): void {
    // 获取Grid的父容器（或者你页面中不会被销毁的容器）
    const stableContainer = this.el.nativeElement.querySelector('.k-grid');
    if (stableContainer) {
      // 将Overlay的容器设置为这个稳定节点
      const overlayRoot = this.overlayContainer.getContainerElement();
      stableContainer.appendChild(overlayRoot);
    }
  }
}

方法二：给菜单添加高优先级样式，避免被隐藏

有时候菜单是存在的，但被Grid的overflow: hidden遮挡了，添加自定义面板类并提升层级：

/* 在组件的样式文件里 */
.grid-action-menu {
  z-index: 10000 !important; /* 确保菜单在Grid之上 */
}

然后在模板里绑定这个类：

<mat-menu #actionMenu="matMenu" [overlapTrigger]="false" panelClass="grid-action-menu">

3. 手动触发菜单关闭（兜底方案） #

如果上面的方法还是不行，可以在点击菜单项时手动调用菜单的close()方法，强制关闭：

<mat-menu #actionMenu="matMenu" [overlapTrigger]="false">
  <div class="action-menu">
    <a mat-menu-item 
       *ngFor="let action of yourActionList" 
       (click)="onActionClick(action, dataItem); actionMenu.close()">
      {{ action.label }}
    </a>
  </div>
</mat-menu>

如果你的onActionClick里有异步操作，记得手动触发变更检测，避免上下文不一致：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

onActionClick(action: any, dataItem: any) {
  // 比如异步请求
  this.yourService.doAction(dataItem).subscribe(() => {
    // 手动触发变更检测
    this.cdr.markForCheck();
    // 也可以在这里再次调用close保险
    this.actionMenu.close();
  });
}

关于DevTools找不到DOM节点的说明 #

Mat Menu的面板是通过Angular CDK Overlay动态创建的，默认不在单元格内部，而是挂载在<body>末尾的cdk-overlay-container里。你可以在DevTools的Elements面板直接搜索cdk-overlay-container，菜单的节点应该在这个容器下。如果还是找不到，说明菜单根本没被创建——大概率是触发按钮和菜单的关联有问题，或者yourActionList是空的导致*ngFor没有渲染出内容。

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