typescript - Dynamisk innehållsprojektion Angular MatDialog
Föreställ dig en projektstruktur som denna:
app
--lazyModA
----ATable
--lazyModB
----BTable
--shared
----DialogWithTables
Vi behöver ha en MatDialog i både lazyModA och lazyModB som båda är lazy laddade och som kan visa MatTables ATable eller BTable i respektive fall. [I praktiken kommer jag att ha minst 5 av dessa moduler och tabeller]
Bortsett från de olika tabellerna är dialogerna exakt likadana, vilket är anledningen till att jag skulle vilja lägga in det i den delade modulen. Men här ligger problemet. Om jag hårdkodar tabellerna i mallen för DialogWithTables skulle det alltid ladda alla mina lata moduler när dialogen öppnas var som helst.
Idén var att använda ContentProjection men eftersom vi instansierar Dialogen i Typescript verkar det vara uteslutet.
Jag har försökt att skicka innehållet via MAT_DIALOG_DATA Injection Token på detta sätt:
this.dialog.open(DialogWithTables,
{data: {content:'<app-a-table [dataSource]="dataSource"></app-a-table>'}
}
)
och olika variationer på syntaxen men inget verkar fungera som avsett. Jag skulle verkligen vilja göra detta på ett rent sätt och inte definiera separata dialoger för varje modul.
Mitt kompromissförslag som jag för närvarande programmerar skulle vara att definiera separata dialoger men låta dem använda den traditionella innehållsprojektionen.
<app-dialog-with-tables>
<app-a-table [dataSource]="dataSource"></app-a-table>
</app-dialog-with-tables>
Men detta känns fortfarande otillfredsställande för mig. Alla hjälptrick eller förslag är välkomna :)
---UPPDATERING---
Jag hittade detta inlägg som rekommenderade att använda *ngComponentOutlet vilket verkar fungera alldeles utmärkt. Nu kämpar jag bara med att få mitt dataSource med i mixen.