如何向Angular的mat-dialog窗口传递并调用函数？

当然可以实现，下面是具体步骤，能让你的对话框成为可复用组件：

1. 编写可复用对话框组件 #

创建对话框的逻辑和模板，通过MAT_DIALOG_DATA接收父组件传递的参数（包括执行保存的函数），用MatDialogRef控制对话框关闭。

对话框组件TS代码 #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-reusable-dialog',
  templateUrl: './reusable-dialog.component.html',
})
export class ReusableDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ReusableDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: {
      submitAction: () => void | Promise<void>;
      dialogTitle?: string;
      // 可扩展其他需要的参数，比如表单数据、提示文本等
    }
  ) {}

  onCancel(): void {
    this.dialogRef.close();
  }

  async onSubmit(): void {
    // 执行父组件传入的保存逻辑
    await this.data.submitAction();
    // 执行完成后关闭对话框，可返回结果给父组件
    this.dialogRef.close(true);
  }
}

对话框组件HTML模板 #

<h2 mat-dialog-title>{{ data.dialogTitle || '确认操作' }}</h2>
<mat-dialog-content>
  <!-- 这里可以放置对话框的内容，比如表单、提示信息等 -->
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">取消</button>
  <button mat-button color="primary" (click)="onSubmit()">提交</button>
</mat-dialog-actions>

2. 父组件中调用对话框并传递函数 #

在父组件里注入MatDialog，定义好保存逻辑，打开对话框时把函数和其他参数一起传入data中。

父组件TS代码 #

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ReusableDialogComponent } from './reusable-dialog/reusable-dialog.component';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.html',
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ReusableDialogComponent, {
      data: {
        dialogTitle: '保存数据',
        // 用箭头函数绑定父组件上下文，确保this指向正确
        submitAction: () => this.saveData()
      }
    });

    // 监听对话框关闭事件，处理返回结果
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('保存操作完成');
      }
    });
  }

  // 父组件的实际保存逻辑
  saveData(): void {
    // 这里写具体的保存操作，比如调用后端API
    console.log('执行父组件的保存逻辑');
    // 如果是异步操作，返回Promise即可
    // return this.apiService.saveData().toPromise();
  }
}

父组件HTML代码 #

<button mat-raised-button color="primary" (click)="openDialog()">打开对话框</button>

关键注意点 #

• 如果传递的函数依赖父组件的this，一定要用箭头函数或者bind(this)来绑定上下文，避免this指向错误
• 如果保存逻辑是异步操作（比如API请求），对话框的onSubmit要加上async/await，确保操作完成后再关闭对话框
• 可以根据需求扩展data中的参数，让对话框适配更多场景

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