要在Angular Material对话框关闭时发送数据,可以使用Angular Material的对话框组件提供的afterClosed()方法。下面是一个示例代码,演示如何在对话框关闭时发送数据:
创建一个对话框组件:
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
template: `
对话框标题
对话框内容
`,
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
onClose(): void {
this.dialogRef.close(this.data); // 关闭对话框时传递数据
}
}
在需要打开对话框的组件中,注入MatDialog服务并使用open()方法打开对话框:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { message: '这是一个消息' }, // 传递数据给对话框组件
});
dialogRef.afterClosed().subscribe((result) => {
console.log('对话框已关闭', result); // 在这里处理对话框关闭时返回的数据
});
}
}
在上面的代码中,通过在open()方法中的data属性中传递数据给对话框组件。在对话框组件中,可以使用MatDialogRef的close()方法关闭对话框并传递数据。在打开对话框的组件中,可以通过订阅对话框的afterClosed()方法来获取对话框关闭时返回的数据。