要解决Angular材料对话框不显示正确信息的问题,可以按照以下步骤进行:
import { MatDialog } from '@angular/material/dialog';
constructor(private dialog: MatDialog) { }
open
方法来打开对话框,并传入对话框组件作为第一个参数。例如:openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { message: 'Hello, World!' } // 传递要显示的数据
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
MAT_DIALOG_DATA
注入器来获取传递给对话框的数据。例如:import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
template: `
Dialog
{{ data.message }} // 显示传递的数据
`,
})
export class DialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}
openDialog
方法。例如:
这样,当点击按钮时,将打开一个对话框,并显示传递的数据。确保在以上步骤中按照实际情况替换组件和数据的名称。