typescript - Angular material-dialog - pass typer inn i dialogkomponent

Jeg jobber med en datadrevet app og står for øyeblikket overfor et problem med å sende typer inn i Material Angular-dialog. Jeg vil lage et gjenbrukbart dialogskjema og trenger å endre typer for en ny dialoginstans.

Finnes det en måte å sende type inn i materialdialog eller inn i komponent? Eller kanskje det er mulig å lage typer i dialogen selv fra streng sendt som data?

Jeg vil bruke typer i dialogkomponenten slik som dette (eller lignende):

export class DialogDynamicItemManagerDialog<T> {

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

Jeg har prøvd å sende typen på denne måten:

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

men det fungerer åpenbart ikke.

Jeg har også prøvd dette:

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

men jeg har ikke funnet en måte å endre streng til type i dialogen etterpå.

Svar #1

TL;DR:

Du kan bruke følgende kode for å spesifisere typen som dialogens data vil bruke:

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 dialogkomponenten din:

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

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

Metoden open i MatDialog-klassen tillater faktisk at tre typer spesifiseres (i rekkefølge):

  • T: Komponentklassen (valgfri - selv om det ikke finnes noen standardverdi, trenger du ikke spesifisere den hvis du bare kaller metoden uten andre typer)
  • D: Typen som skal brukes for dataene som skal legges til dialogen (valgfritt - standard er any)
  • R: Typen som skal brukes for resultatet av dialogen (valgfritt - standard er any)

Metoden er definert som nedenfor:

  /**
   * 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> {
    // ...
  }

Deretter blir D-typen sendt til MatDialogConfig, som godtar samme type for å brukes for dataene som skal sendes inn i dialogen.

Referanser:

  • MatDialog#open kildekode - legg merke til hvordan typene blir sendt rundt i koden!
  • MatDialogConfig kildekode - legg merke til hvordan klassen er definert!

Relaterte artikler