Angular15中mat-tab嵌套mat-menu时内容偶发不显示问题排查与解决

我正在使用Angular 15.0.4版本，将mat-tab放入mat-menu中时，有时会出现异常：mat-tab的内容无法显示。相关代码如下：

<mat-menu #menu="matMenu">
  <mat-tab-group (click)="selectTab($event)">
    <mat-tab label="Affichage"> ABC </mat-tab>
    <mat-tab label="Export"> DEF </mat-tab>
  </mat-tab-group>
</mat-menu>

• 浮层渲染时机冲突：MatMenu基于Angular CDK的Overlay动态生成浮层DOM，而MatTabGroup的内容容器高度依赖初始化时的尺寸计算。菜单打开时，TabGroup的DOM刚被插入页面，容器尺寸尚未稳定，TabGroup可能错误计算内容高度为0，导致内容隐藏。
• 事件冒泡干扰：点击MatTab标签时，事件会冒泡到MatMenu容器，触发菜单关闭逻辑，同时中断TabGroup的切换状态更新，使得切换后的内容无法正常渲染。

1. 阻止事件冒泡，避免菜单意外关闭 #

修改模板中的点击事件处理，阻止事件向上冒泡到MatMenu：

<mat-menu #menu="matMenu">
  <mat-tab-group (click)="$event.stopPropagation()">
    <mat-tab label="Affichage"> ABC </mat-tab>
    <mat-tab label="Export"> DEF </mat-tab>
  </mat-tab-group>
</mat-menu>

2. 强制TabGroup在菜单打开后刷新尺寸 #

在组件中监听MatMenu的opened事件，确保菜单DOM完全渲染后，触发TabGroup重新计算尺寸：

模板代码 #

<button [matMenuTriggerFor]="menu">打开菜单</button>
<mat-menu #menu="matMenu" (opened)="onMenuOpened()">
  <mat-tab-group #tabGroup>
    <mat-tab label="Affichage"> ABC </mat-tab>
    <mat-tab label="Export"> DEF </mat-tab>
  </mat-tab-group>
</mat-menu>

组件逻辑 #

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-tab-example',
  templateUrl: './tab-example.component.html',
})
export class TabExampleComponent {
  @ViewChild('tabGroup') tabGroup!: MatTabGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  onMenuOpened() {
    // 延迟执行确保菜单DOM渲染完成
    setTimeout(() => {
      // 强制刷新视图，触发TabGroup重新计算尺寸
      this.cdr.detectChanges();
      // 兼容部分版本：手动触发resize事件
      window.dispatchEvent(new Event('resize'));
    }, 0);
  }
}

3. 调整菜单容器样式，避免TabGroup被挤压 #

给MatMenu添加自定义最小宽度，确保TabGroup有足够的显示空间：

::ng-deep .mat-menu-panel {
  min-width: 300px; /* 根据实际需求调整 */
}

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