Angular 将数据注入动态组件@inputs传递到垫对话组件

Question

我遇到需要在动态对话框组件中显示动态表组件的情况。

动态对话框可以接收要在其中显示的另一个组件。这是通过 MatDialogConfig 数据属性完成的。

这是我对话框的模板中：

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData"></ng-container>

这可确保传入的组件仅在提供组件时才添加 dom。这一切都按预期工作。当我需要将数据放入该传递组件的输入中时，就会出现问题。我的动态表组合需要提供多个@input属性才能运行。

我试图通过这样的喷油器来实现这一点：

let myInjector: Injector;
myInjector = ReflectiveInjector.resolveAndCreate(
[{
provide: DATA,
useValue: [{
someProp: "data1"
}, {
someProp: "data2"
}]
},
{
provide: MUTATORARRAY,
useValue: []
},
{
provide: HIDDENPROPS,
useValue: []
},
{
provide: SHOWSELECTCOLUMN,
useValue: []
},
{
provide: SHOWEDITCOLUMN,
useValue: []
}
],
myInjector
);
const dialogConfig = new MatDialogConfig();
let dialogConfigModel: DialogConfigModel = {
dynamicFormModel: [],
additionalData: DataTableComponent,
dialogTitle: "Change Items(s) Status"
};
dialogConfig.width = this.dialogWidthNormal;
dialogConfig.data = dialogConfigModel;
const dialogRef = this._dialog.open(DynamicDialogComponent, dialogConfig);

我把喷油器放在我的提供者那里：

providers: [
{ provide: DATA, useValue: "" },
{ provide: MUTATORARRAY, useValue: "" },
{ provide: HIDDENPROPS, useValue: "" },
{ provide: SHOWSELECTCOLUMN, useValue: "" },
{ provide: SHOWEDITCOLUMN, useValue: "" }
]

但。。。现在我该怎么办？数据不会注入到组件中，因为我认为注入器不会链接到我的DataTableComponent。我相信我错过了注射器的步骤。我在这里遵循了这个： 这里

编辑：

我注意到我没有将喷油器添加到插座：

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData"></ng-container>

所以我把它传递到对话框中，把它改成这样：

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData; injector: dialogPassedPayload.injector"></ng-container>

但是现在每当我打开对话框时，我都会收到此错误：

ERROR Error: No provider for ComponentFactoryResolver!

Answer 1

const compFactory = this.compFactRes.resolveComponentFactory(ComponentClassName);
const compRef = compFactory.create(this.injector);
const compInstance: any = compRef.instance;
compInstance.data = data; //you can pass data here
this.appRef.attachView(compRef.hostView);
const compElement = (compRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; // here you are getting the component html you can append it to anywhere in the angular app

我认为这将解决您的问题。如果你把它写在服务函数中，那么你也可以从其他地方调用它。