Angular Material mat-expansion-panel在隐藏组件中懒加载渲染是否异常？

我之前处理过Angular Material组件相关的问题，确实碰到过mat-expansion-panel在隐藏容器（比如处于关闭状态的mat-sidenav）内使用懒加载内容时出现渲染异常的情况。

先给大家回顾下mat-expansion-panel官方的懒加载实现方式，代码示例如下：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

这种写法通过将面板内容放入ng-template并绑定matExpansionPanelContent指令，实现了内容的懒加载——只有当面板第一次被展开时，模板内的内容才会被渲染，以此提升初始加载性能。

但当这个面板被放置在隐藏的容器组件（比如未展开的mat-sidenav）内部时，就会出现诸多渲染异常问题：比如面板展开后内容布局错乱、展开/收起动画卡顿甚至失效，部分交互元素无法正常响应等。这背后的核心原因是：隐藏容器在初始阶段没有提供有效的布局上下文，面板的尺寸计算、样式渲染都依赖于容器的可视状态，而懒加载内容在容器显示后无法正确获取到更新后的布局参数。

针对这类问题，我总结了几个实用的解决思路：

• 监听隐藏容器的显示状态（比如mat-sidenav的opened输出事件），在容器完全显示后，通过ChangeDetectorRef手动触发面板的变更检测，强制重新渲染内容
• 延迟初始化面板组件：不要在容器初始化时就渲染mat-expansion-panel，而是等容器显示后再通过动态组件加载的方式添加面板
• 给mat-expansion-panel设置显式的宽度、高度约束，避免其布局完全依赖父容器的自动计算，减少隐藏状态带来的布局偏差

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