以下是一个使用Angular Material UI Dialog在对话框弹出窗口中提供数据的示例:
ng add @angular/material
import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-data',
template: `
Data Dialog
{{ data }}
`,
})
export class DialogDataComponent {
constructor(public dialogRef: MatDialogRef) {}
closeDialog() {
this.dialogRef.close();
}
}
@Component({
selector: 'app-main-component',
template: `
`,
})
export class MainComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogDataComponent, {
data: 'Hello, Dialog!',
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed:', result);
});
}
}
通过将数据传递给对话框的"data"选项,可以在对话框组件中获取到该数据。在上述示例中,我们将"Hello, Dialog!"传递给了对话框组件,然后在对话框的模板中使用"{{ data }}"来显示数据。关闭对话框时,我们通过调用"closeDialog()"方法来关闭对话框。
希望这个示例对你有帮助!