要将类型传递给Angular Material对话框组件,您可以通过以下步骤进行操作:
DialogData
的接口,它包含对话框的一些属性和方法。export interface DialogData {
title: string;
message: string;
buttonText: string;
// 其他属性和方法
}
MatDialog
的open
方法时,可以使用data
属性将类型传递给对话框组件。import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: `
{{ data.title }}
{{ data.message }}
`,
})
export class DialogExampleComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: DialogData
) {}
}
open
方法的data
属性。import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example.component';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
constructor(private dialog: MatDialog) {}
openDialog() {
const dialogData: DialogData = {
title: '示例对话框',
message: '这是一个示例对话框。',
buttonText: '关闭',
};
this.dialog.open(DialogExampleComponent, {
data: dialogData,
});
}
}
现在,当您打开对话框时,将会将类型传递给对话框组件,并在对话框模板中使用该类型的属性。