Angular MatDialog组件提供了几种事件类型,可以用于捕获对话框打开、关闭和动作按钮点击等事件。下面是一个示例解决方法,展示了如何使用这些事件类型:
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { name: 'John' }
});
dialogRef.afterOpened().subscribe(() => {
console.log('Dialog opened');
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed', result);
});
}
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: 'dialog.component.html',
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
在上述示例中,我们使用了afterOpened()
方法来订阅对话框打开事件,该方法返回一个Observable,可以捕获对话框打开后的操作。类似地,我们使用afterClosed()
方法来订阅对话框关闭事件,该方法返回一个Observable,可以捕获对话框关闭后的操作,并获取传递的返回值。
希望上述示例对你有所帮助!