Question

在某些情况下，我需要在动态对话框组件内部显示动态表组件。

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

这在我的对话框模板中：

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

这确保传入的组件仅在提供组件时才添加dom。这一切都按预期工作。当我需要将数据输入到该传递的组件的输入中时，就会出现问题。我的动态表comp需要提供多个@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 。我相信我缺少使用喷射器的步骤。我在这里关注此：HERE

编辑：

我注意到我没有将喷油器添加到出口：

<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

我认为这可以解决您的问题。如果您在服务函数中编写此代码，则也可以从其他地方调用它。

角度将数据注入动态组件@inputs中，然后将它们传递到mat-dialog组件

1 个答案: