角度材质对话框 - 将类型传递到对话框组件中

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

特尔；博士：

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

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，它接受用于传递给对话框的数据的相同类型。

参考：

• MatDialog#open源代码- 注意代码中的类型是如何传递的！
• MatDialogConfig源代码- 注意类是如何定义的！

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