使用@Inject MAT_DIALOG_DATA 传递多个属性

Question

这个对话框是共享的，我需要在不同的情况下使用它。我正在尝试的是在组件使用对话框时接收不同的数据。

我可以正确接收第一个数据，但是 'data2' 与 'data1' 相同...是否可以使用两个“@Inject(MAT_DIALOG_DATA)”？

Dialog ctor（我试过的）

constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data1: ImportType[],
    @Inject(MAT_DIALOG_DATA) public data2: string[]) {
    this.imports = data1;
    this.fieldsToBeEdited = data2;
}

Mat 对话框配置文件

export class DialogConfig<D = any> implements MatDialogConfig {
    disableClose?: boolean;
    width?: string;
    height?: string;
    data1?: D | null;
    data2?: D | null;

    constructor(data1: any, data2?: string[]) {
        this.data1= data;
        this.data2= data2;
        this.disableClose = true;
        this.width = '40%';
        this.height = '60%';
    }
}

打开对话框的方法

 openDialog() {
    const dialogConfig = new DialogConfig(this.types, this.data);

    this.dialogConfig.open(DialogComponent, dialogConfig);
  }

Answer 1

您可以使用封装对象来传递数据

constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData]) {
    this.imports = data.imports;
    this.fieldsToBeEdited = data.fieldsToBeEdited; }

export interface DialogData{
fieldsToBeEdited: any[,]
imports: any[]
}

使用@Inject MAT_DIALOG_DATA 传递多个属性

Passing more than one property using @Inject MAT_DIALOG_DATA

dialog

angular

mat-dialog

使用@Inject MAT_DIALOG_DATA 传递多个 属性

Passing more than one property using @Inject MAT_DIALOG_DATA

dialog

angular

mat-dialog

使用@Inject MAT_DIALOG_DATA 传递多个属性