Хобрук: Ваш путь к мастерству в программировании

Angular вводит данные в динамические компоненты @inputs, передаваемые компоненту mat-dialog

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

Динамический диалог может принимать другой компонент для отображения в нем. Это достигается с помощью свойства данных 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!

Ответы:


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

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

20.06.2019
  • Спасибо за комментарий, но это не устранило ошибку. То же сообщение об ошибке, что и раньше 20.06.2019
  • На самом деле эта ошибка повторяется сейчас: ERROR NullInjectorError: StaticInjectorError (AppModule) [BaseTableComponent - ›ComponentRef]: StaticInjectorError (Platform: core) [BaseTableComponent -› ComponentRef]: 20.06.2019
  • Новые материалы

    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..

    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..

    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..

    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..

    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..