import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
template: `
Dialog Title
Dialog message
`
})
export class DialogComponent {
constructor(public dialogRef: MatDialogRef) {}
noClick(): void {
this.dialogRef.close();
}
}
在上面的示例中,我们在dialog组件中定义了一个MatDialogRef依赖项,该依赖项将在我们关闭对话框时返回值。 我们使用mat-dialog-close指令来指定对话框关闭时要返回的值。
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent);
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
});
}
}
在这里,我们使用MatDialog服务的open方法打开一个新的DialogComponent实例。 我们可以使用afterClosed方法来订阅对话结束的事件,并访问返回的结果。
以上就是解决“Angular:从对话框中返回值”问题的方法。