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

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

我不认为按照你的方式设置一个打字对话框是可能的。 但是你可以做的是：

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

Answer 2

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) { }
}

---

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

• 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源代码 - 注意如何定义类！