typescript - Angular material-dialog - skicka typer till dialogkomponent

Jag arbetar på en datadriven app och just nu står jag inför ett problem med att skicka typer till Material Angular-dialog. Jag vill skapa ett återanvändbart dialogformulär och behöver ändra typer för en ny dialoginstans.

Finns det ett sätt att skicka typ till ett materialdialog eller till en komponent? Eller kanske finns det möjlighet att skapa typer i dialogen själv från sträng som skickas som data?

Jag vill använda typer i dialogkomponenten på detta sätt (eller liknande):

export class DialogDynamicItemManagerDialog<T> {

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

Jag har försökt att ange typen på det här sättet:

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

men det fungerar uppenbarligen inte.

Jag har också försökt detta:

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

men jag har inte hittat ett sätt att ändra sträng till typ i dialogen efteråt.

Svar #1

Sammanfattning:

Du kan använda följande kod för att specificera vilken typ som din dialogs data kommer att använda:

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
      }
    };
  }
}

I din dialogkomponent:

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

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

Metoden open i MatDialog-klassen tillåter faktiskt att tre typer specificeras (i ordningsföljd):

  • T: Komponentklassen (valfri - även om det inte finns något standardvärde, behöver du inte ange det om du bara anropar metoden utan några andra typer)
  • D: Typen som ska användas för datan som ska läggas till i dialogrutan (valfritt - standard är any)
  • R: Typen som ska användas för resultatet av dialogrutan (valfritt - standard är any)

Metoden definieras enligt nedan:

  /**
   * 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-typen skickas sedan till MatDialogConfig, som accepterar samma typ för att användas för de data som ska skickas in i dialogen.

Referenser:

  • MatDialog#open källkod - notera hur typerna skickas runt i koden!
  • MatDialogConfig källkod - notera hur klassen är definierad!

Relaterade artiklar