角度材質對話框 - 將類型傳遞到對話框組件中

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源代碼 - 注意如何定義類！