Angular - Заводские компоненты внутри для

Question

Я использую Angular Gridster 2 для построения информационных панелей компонентов. Эти компоненты, которые мы называем гаджетами, могут иметь другой селектор (то есть компонент), но я знаю это во время выполнения после вызова серверной части / базы данных.

Кроме этого, код сетки находится внутри Angular библиотеки но компоненты для рендеринга хранятся в основном приложении.

Итак, я подумал о таком подходе:

Библиотечный компонент получает несколько входных параметров. Объект о панели мониторинга (с заголовком et c ...), список отображаемых элементов (объекты, реализующие интерфейс GridsterItem) и factory_component, который вызывающий реализует для динамического создания компонента.

LIBRARY DASHBOARD КОМПОНЕНТ:

export class DashboardComponent implements OnInit {

  @Input() dashboard  : D3AbstractDashboard = new D3AbstractDashboard();
  @Input() gadgets    : GridsterItem[]      = [];
  @Input() factory_component : Function      = undefined;

...
}

<gridster [options]="options">
  <gridster-item *ngFor="let item of gadgets" [item]="item">
       {{ factory_component(item) }}
  </gridster-item>
</gridster>

КОМПОНЕНТ ВЫЗОВА

Вызывающий использует компонент библиотеки в его HTML передаче трех параметров. Он обращается к базе данных для получения данных приборной панели и списка виджетов, которые он преобразует в класс, реализующий GristerItem. Этот класс имеет свойство, которое является «селектором» компонента относительно этого виджета.

<dashboard
   [dashboard]          = "dashboard"
   [gadgets]            = "grid_items"
   [factory_component]  = "factoryComponent"
>

</dashboard>

class MyApGristerItem implements GristerItem
...
constructor(gadget: Gadget)
{
        this.x          = gadget.x;
        this.y          = gadget.y;
        this.cols       = gadget.cols;
        this.rows       = gadget.rows;
        this.selector   = gadget.selector; //for example my-foo-component
        this.data       = gadget .data;
}

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

//Caller Component
factoryComponent(item)
{
    console.log(item);
}

В консоли у меня есть все элементы, которые вызывающий передал внутри grid_items (я знаю, что это немного сложно, потому что вызывающий получает гаджет, который он передал)

Теперь, что мне нужно - визуализировать относительный компонент с помощью селектора внутри объекта элемента.

Ипотетически результат должен быть:

<item.selector [data] = "item.data"> </item.selector>

Например

<my-foo-component  [data] = "item.data"> </my-foo-component>

MyFooComp onet будет компонентом с

@Input() data : Objects = {};

, который получает свойство данных БД для этого гаджета, объясняющее, что делать.

Answer 1

Это самый простой способ создать элемент с помощью селектора.

<dashboard 
 [dashboard]="dashboard"
 [gadgets]="grid_items"
 [ngSwitch]="componentTag"
>
  <gadget1 *ngSwitchCase="'gadget1'"></gadget1>
  <gadget2 *ngSwitchCase="'gadget2'"></gadget2>
  <gadget3 *ngSwitchCase="'gadget3'"></gadget3>
</dashboard>

export class DashboardComponent implements OnInit {

  @Input() dashboard: D3AbstractDashboard = new D3AbstractDashboard();
  @Input() gadgets: GridsterItem[] = [];
  @ContentChild() component?: Gadget;

  ...
}

Если вам нужно создать гораздо больше типов элементов или вы не хотите, чтобы они были частью пакета вы можете использовать Angular Material Portal (https://material.angular.io/cdk/portal/overview)