Угловой ввод данных в динамические компоненты @inputs, передаваемый компоненту mat-dialog

Question

У меня есть ситуация, когда мне нужно отобразить компонент динамической таблицы внутри компонента динамического диалога.

Динамический диалог может принимать другой компонент, который будет отображаться внутри него.Это достигается через свойство данных MatDialogConfig.

Это в шаблоне моего диалога:

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

Это гарантирует, что переданный компонент добавляется только в том случае, если компонент предоставлен,Это все работает, как ожидалось.Проблема возникает, когда мне нужно получить данные во входные данные для этого переданного компонента.Для работы моей динамической таблицы нужно указать несколько свойств @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

Я думаю, что это решит вашу проблему. Если вы напишите это внутри сервисной функции, то сможете вызывать ее и из других мест.