当使用 Angular Material 的 mat-tab-group 时，若在 tab 切换后自定义子组件内的 :enter 动画不再触发，根本原因是默认非懒加载导致视图复用；通过为每个 mat-tab 显式包裹 <ng-template matTabContent> 并禁用 dynamicHeight，可确保每次激活都重建视图、重触发动画。
当使用 angular material 的 mat-tab-group 时，若在 tab 切换后自定义子组件内的 :enter 动画不再触发，根本原因是默认非懒加载导致视图复用；通过为每个 mat-tab 显式包裹 `
Angular Material 的 mat-tab 默认采用“视图复用”策略：首次切换到某 tab 时渲染内容，后续再次选中时仅显示已存在的 DOM 节点，不重新创建组件实例——这直接导致 :enter 动画（依赖 @angular/animations 的 trigger + transition(':enter', ...)）仅在首次加载时生效，后续切换因无节点插入行为而静默跳过。
核心解法：启用显式懒加载 + 避免高度动态干扰
关键在于两点协同：
- 强制懒加载：为每个 <mat-tab> 内容包裹 <ng-template matTabContent>，这是 Angular Material 官方支持的懒加载语法。该模板仅在对应 tab 被激活时才实例化其内容，从而保证每次进入都触发组件生命周期（包括 ngAfterViewInit）和动画触发器的 :enter 条件；
- 移除 dynamicHeight="true"：该属性会强制 tab 区域根据当前内容高度动态缩放，但在配合 <ng-template matTabContent> 时易引发布局抖动与动画错位（如您观察到的“高度归零遮盖其他 tab”），属于已知兼容性问题，应禁用。
✅ 正确写法如下：
<mat-tab-group
class="mat-tab-group"
mat-stretch-tabs="false"
mat-align-tabs="start"
<!-- ⚠️ 移除 dynamicHeight="true" -->
>
<mat-tab label="Tab 1">
<ng-template matTabContent>
<app-my-tab-content-component1></app-my-tab-content-component1>
</ng-template>
</mat-tab>
<mat-tab label="Tab 2">
<ng-template matTabContent>
<app-my-tab-content-component2></app-my-tab-content-component2>
</ng-template>
</mat-tab>
<mat-tab label="Tab 3">
<ng-template matTabContent>
<app-my-tab-content-component3></app-my-tab-content-component3>
</ng-template>
</mat-tab>
<mat-tab label="Tab 4">
<ng-template matTabContent>
<app-my-tab-content-component4></app-my-tab-content-component4>
</ng-template>
</mat-tab>
</mat-tab-group>? 注意事项：
- <ng-template matTabContent> 必须直接作为 <mat-tab> 的唯一子节点，不可嵌套在 div 或其他容器内，否则指令无法正确识别；
- 若您的自定义组件（如 app-my-tab-content-component3）自身也使用了 @HostListener('window:resize') 或 ResizeObserver 等响应式逻辑，请确保其在每次懒加载重建后能正确初始化；
- 动画触发依赖 * 或 :enter 状态变化，建议在组件模板根元素上添加 [@myAnimationTrigger]，并在 animations: [...] 中正确定义触发器；
- Angular 16+ 已完全支持此模式，无需额外 polyfill 或模块导入（确保已导入 MatTabsModule 和 BrowserAnimationsModule）。
通过以上调整，app-my-tab-content-component3 中定义的 :enter 动画将在每次切换至 Tab 3 时稳定触发，彻底解决“仅首次生效”的问题。
