Angular Material 中的 MatDialog 对话框未关闭

Angular Material 中的 MatDialog 对话框未关闭问题的解决方案

typescript
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
// 在对话框组件中
constructor(
  public dialogRef: MatDialogRef,
  @Inject(MAT_DIALOG_DATA) public data: any
) {}
onNoClick(): void {
  this.dialogRef.close();
}
// 在调用对话框的组件中
openDialog(): void {
  const dialogRef = this.dialog.open(YourDialogComponent, {
    width: '250px',
    data: { name: 'example' }
  });
  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    // 执行关闭后的操作
  });
}

typescript
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnDestroy {
  private subscriptions: Subscription[] = [];
  // 添加订阅
  ngOnInit() {
    this.subscriptions.push(/* your subscription here */);
  }
  // 在组件销毁时取消订阅
  ngOnDestroy() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

typescript
import { forkJoin } from 'rxjs';
// ...
// 在关闭对话框的方法中
closeDialog(): void {
  forkJoin(
    // 异步操作1,
    // 异步操作2,
    // ...
  ).subscribe(
    () => {
      this.dialogRef.close();
    },
    error => {
      console.error('Error during async operations', error);
      // 处理错误情况
    }
  );
}