Angular中嵌套MatDialog动画仅首个生效的问题及替代方案咨询

当使用ngDialogAnimationService给嵌套MatDialog添加动画时，第二个弹窗动画失效的核心原因是：全局动画服务的上下文绑定逻辑无法正确识别层级嵌套的弹窗实例，导致动画触发器没有被正确挂载到第二个弹窗上。以下是几种可行的解决方法：

方法一：打开弹窗时单独配置动画 #

放弃全局动画服务，在每次调用dialog.open()时，通过MatDialogConfig的animation属性为每个弹窗指定独立动画：

1. 定义全局动画样式 #

在项目全局样式文件（如styles.css）中添加动画关键帧：

@keyframes slide-up-enter {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(30px); }
}

.slide-up-enter {
  animation: slide-up-enter 0.3s ease-out forwards;
}

.slide-up-exit {
  animation: slide-up-exit 0.3s ease-in forwards;
}

2. 打开弹窗时配置动画参数 #

在组件中打开第一个和第二个弹窗时，分别传入动画配置：

// 打开第一个弹窗
openFirstDialog(): void {
  this.dialog.open(FirstDialogComponent, {
    animation: {
      enter: 'slide-up-enter',
      exit: 'slide-up-exit'
    }
  });
}

// 在第一个弹窗组件内打开第二个弹窗
openSecondDialog(): void {
  this.dialog.open(SecondDialogComponent, {
    animation: {
      enter: 'slide-up-enter',
      exit: 'slide-up-exit'
    }
  });
}

方法二：在弹窗组件内定义动画触发器 #

利用Angular原生动画模块，直接在每个弹窗组件内部定义动画触发器，确保动画与组件实例绑定：

1. 组件内定义动画 #

在弹窗组件的元数据中添加动画配置：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-first-dialog',
  templateUrl: './first-dialog.component.html',
  animations: [
    trigger('dialogAnim', [
      transition(':enter', [
        style({ opacity: 0, transform: 'scale(0.9)' }),
        animate('0.25s ease-out', style({ opacity: 1, transform: 'scale(1)' }))
      ]),
      transition(':leave', [
        animate('0.25s ease-in', style({ opacity: 0, transform: 'scale(0.9)' }))
      ])
    ])
  ]
})
export class FirstDialogComponent {
  constructor(public dialog: MatDialog) {}

  openSecondDialog(): void {
    this.dialog.open(SecondDialogComponent);
  }
}

2. 模板中绑定动画触发器 #

在弹窗的根容器元素上添加动画触发器：

<div mat-dialog-container [@dialogAnim]>
  <h2 mat-dialog-title>第一个弹窗</h2>
  <mat-dialog-content>
    <button mat-raised-button (click)="openSecondDialog()">打开第二个弹窗</button>
  </mat-dialog-content>
</div>

第二个弹窗组件重复上述配置即可。

方法三：自定义动画服务适配嵌套场景 #

如果必须使用服务管理动画，可以修改动画服务逻辑，确保为每个弹窗实例独立创建动画订阅：

@Injectable({ providedIn: 'root' })
export class CustomDialogAnimationService {
  constructor(private overlay: Overlay) {}

  attachAnimation(dialogRef: MatDialogRef<any>): void {
    const containerElement = dialogRef._containerInstance._elementRef.nativeElement;
    containerElement.classList.add('dialog-enter');
    
    dialogRef.afterClosed().subscribe(() => {
      containerElement.classList.add('dialog-exit');
      setTimeout(() => containerElement.classList.remove('dialog-enter', 'dialog-exit'), 300);
    });
  }
}

在打开每个弹窗后调用该服务：

const dialogRef = this.dialog.open(FirstDialogComponent);
this.customAnimService.attachAnimation(dialogRef);

以上三种方法都能解决嵌套MatDialog的动画失效问题，推荐优先使用方法一或方法二，实现更简洁且易于维护。

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