Question

我正在开发数据驱动的应用程序，目前正面临将类型传递到材质角度对话框的问题。我想创建可重用的对话框表单，并且需要更改新对话框实例的类型。

是否可以将类型传递到材质对话框或组件中？还是有可能根据作为数据传递的字符串在对话框本身中创建类型？

我想在对话框组件中使用此类（或类似形式）的类型：

export class DialogDynamicItemManagerDialog<T> {

    public dialogName: string;
    public items: Array<T>;
    public selectedItem: T;
    ...
}

我试图通过这样的类型：

 OpenDynamicDialog(): void {
    this.dialog.open(DialogDynamicItemManagerDialog<MyType>, {
      data: {
        title: 'Manage items',
        items: this.items
      },
    });
}

但显然不起作用。

我也尝试过：

 OpenDynamicDialog(): void {
    const dialogRef = this.dialog.open(DialogDynamicItemManagerDialog, {
      data: {
        title: 'Manage items',
        items: this.items,
        itemType: itemType
      },
    });
}

但是我没有找到一种将字符串更改为对话框类型的方法。

Answer 1

TL; DR：

您可以使用以下代码指定对话框数据将使用的类型：

import { MatDialog } from '@angular/material/dialog';

export class MyComponent {
  constructor(private dialog: MatDialog) { }

  openDialog() {
    this.dialog.open<MyDialogComponent, MyType>(MyDialogComponent, {
      data: {
        // Your data goes here
      }
    };
  }
}

在对话框组件中：

import { MAT_DIALOG_DATA } from '@angular/material/dialog';

export class MyDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: MyType) { }
}

open类的MatDialog方法实际上允许指定三种类型（按顺序排列）：

T：组件类（可选-尽管没有默认值，如果您只是在不使用任何其他类型的情况下调用该方法，则不必指定它）
D：要用于添加到对话框中的数据的类型（可选-默认为any）
R：用于对话框结果的类型（可选-默认为any）

方法定义如下：

  /**
   * Opens a modal dialog containing the given component.
   * @param componentOrTemplateRef Type of the component to load into the dialog,
   *     or a TemplateRef to instantiate as the dialog content.
   * @param config Extra configuration options.
   * @returns Reference to the newly-opened dialog.
   */
  open<T, D = any, R = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
          config?: MatDialogConfig<D>): MatDialogRef<T, R> {
    // ...
  }

然后，将D类型传递给MatDialogConfig，Service接受与用于传递给对话框的数据相同的类型。

参考文献：

MatDialog#open source code-注意类型如何在代码中传递！
MatDialogConfig source code-注意类的定义方式！

Answer 2

我认为以概述的方式创建类型化对话框是不可能的。但是，您可以执行以下操作：

export class MyDialog {

    private savedForLater: SomeType;

    constructor(
            public containingDialog: MatDialogRef<MyDialog>,
            @Inject(MAT_DIALOG_DATA) public data: SomeType) {

        this.savedForLater = data;
    }

}

不幸的是，当您启动对话框时，该类型没有被强制执行，因此您仍然可以这样做

const dialogData = {} as SomeType
const fakeDialogData = {} as SomeOtherType
this.dialog.open(MyDialog, { data: dialogData });
this.dialog.open(MyDialog, { data: fakeDialogData }); // this compiles

角材料对话框-将类型传递到对话框组件

2 个答案: