Angular 16中mat-tabs切换后自定义组件内:enter动画失效求助

我的情况和Olafvv遇到的问题非常相似，但我用的是Angular 16，配置有细微差别。我有一个包含多个标签页的mat-tab-group，遇到的问题相同：从mat-tab切换离开后再返回时，:enter动画无法生效。不同的是，我的动画是针对app-MyTabContentComponents其中一个内部的自定义子组件，没法直接添加ng-template。

我尝试了Olafvv问题里的已接受答案，但不确定该把<ng-template matTabContent>放在哪里来启用懒加载（从而重新触发:enter动画）。我试过以下几个位置：

• 在mat-tab内部包裹<app-MyTabContentComponentX>元素，但这导致了异常动画：标签页1的高度变成0，还遮挡了标签页2。
• 作为每个MyTabContentComponentX组件HTML中的外层元素。
• 仅在MyTabContentcomponentX元素上使用该指令，但显然它和ng-template类绑定，导致完全无法渲染！

相关HTML代码如下，动画失效的组件包含在MyTabContentComponent3中。需要说明的是，标签页首次打开时动画是正常工作的：

<mat-tab-group class="mat-tab-group" mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight="true">
  <mat-tab label="Tab 1"> 
    <app-MyTabContentComponent1></app-MyTabContentComponent1>
  </mat-tab>
  <mat-tab label="Tab 2"> 
    <app-MyTabContentComponent2></app-MyTabContentComponent2> 
  </mat-tab> 
  <mat-tab label="Tab 3"> 
    <app-MyTabContentComponent3></app-MyTabContentComponent3> 
  </mat-tab>
  <mat-tab label="Tab 4">  
    <app-MyTabContentComponent4></app-MyTabContentComponent4> 
  </mat-tab>
</mat-tab-group>

如何让该动画在每次选中标签页时都生效？

方案1：正确使用matTabContent懒加载模板 #

你需要在mat-tab内部用<ng-template matTabContent>包裹对应的内容组件，同时避免之前的高度异常问题。正确写法如下：

<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-MyTabContentComponent1></app-MyTabContentComponent1>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 2">
    <ng-template matTabContent>
      <app-MyTabContentComponent2></app-MyTabContentComponent2>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 3">
    <ng-template matTabContent>
      <app-MyTabContentComponent3></app-MyTabContentComponent3>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 4">
    <ng-template matTabContent>
      <app-MyTabContentComponent4></app-MyTabContentComponent4>
    </ng-template>
  </mat-tab>
</mat-tab-group>

配置后，每次切换到标签页时组件会重新初始化，:enter动画就能正常触发。如果仍有高度异常，检查组件内的样式设置，或者暂时移除dynamicHeight属性测试——懒加载模式下该属性可能和组件初始化时序冲突。

方案2：手动触发动画（无需懒加载） #

如果懒加载不符合你的需求，可以通过监听标签切换事件，手动触发目标组件的动画：

1. 在父组件类中获取MyTabContentComponent3的引用：

@ViewChild(MyTabContentComponent3) tab3Content!: MyTabContentComponent3;

2. 监听标签切换事件，切换到标签3时重置动画状态：

onTabChange(index: number) {
  if (index === 2) { // 标签3的索引为2（从0开始计数）
    this.tab3Content.resetAnimation();
  }
}

3. 在模板中绑定切换事件：

<mat-tab-group class="mat-tab-group" mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight="true"
               (selectedIndexChange)="onTabChange($event)">
  <!-- 标签内容保持不变 -->
</mat-tab-group>

4. 在MyTabContentComponent3中实现重置动画的方法，通过切换显示状态重新触发:enter动画：

export class MyTabContentComponent3 {
  isVisible = true;

  resetAnimation() {
    this.isVisible = false;
    // 等待DOM更新后再显示，确保动画触发
    setTimeout(() => {
      this.isVisible = true;
    }, 10);
  }
}

5. 在MyTabContentComponent3的模板中用*ngIf控制显示：

<div *ngIf="isVisible" [@yourAnimationTrigger]>
  <!-- 自定义子组件内容 -->
</div>

方案3：基于标签激活状态触发动画 #

把:enter动画改为监听mat-tab的激活状态，通过类名触发动画：

1. 在mat-tab上绑定激活状态到子组件：

<mat-tab label="Tab 3" #tab3>
  <app-MyTabContentComponent3 [class.tab-active]="tab3.isActive"></app-MyTabContentComponent3>
</mat-tab>

2. 修改动画定义，针对.tab-active类触发：

animations: [
  trigger('tabAnimation', [
    state('inactive', style({ opacity: 0, transform: 'translateX(20px)' })),
    state('active', style({ opacity: 1, transform: 'translateX(0)' })),
    transition('inactive => active', animate('300ms ease-out')),
  ])
]

3. 在MyTabContentComponent3中根据类名切换动画状态：

@HostBinding('class.tab-active') isActive = false;
@HostBinding('@tabAnimation') get animationState() {
  return this.isActive ? 'active' : 'inactive';
}

@Input() set tabActive(value: boolean) {
  this.isActive = value;
}

这样每次标签激活时，动画都会重新触发。

内容的提问来源于stack exchange，提问作者James van Rossum