Angular - 工廠內部組件

Question

我使用 Angular Gridster 2 來構建組件儀表板。 這些組件，我們稱為小工具，可能有不同的選擇器（所以組件），但我在后端/數據庫調用后的運行時知道它。

除此之外，網格的代碼在 Angular 庫中，但要渲染的組件存儲在主應用程序中。

所以我在想這種方法：

庫組件接收幾個輸入參數。 關於儀表板（帶有標題等）的 object、要顯示的項目列表（實現 GridsterItem 接口的對象）以及調用者實現以動態構建組件的 factory_component。

圖書館儀表板組件：

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 的 Class 中轉換的小部件列表。 此 class 具有一個屬性，即相對於該小部件的組件的“選擇器”。

<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;
}

如您所見，Library 組件使用工廠 function 將 Item 返回給調用者，並且此路由效果很好。

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

在控制台中，我有調用者在 grid_items 中傳遞的所有項目（我知道它有點復雜，因為調用者收到了它傳遞的小工具）

現在我需要使用 object 項內的選擇器來渲染相關組件。

Ipoteticly 的結果必須是：

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

例如

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

MyFooComponet 將是一個具有

@Input() data : Objects = {};

接收該小工具的 DB 數據屬性，該屬性解釋了要做什么。

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.ZD18B8624A0F5F721DA7ioB82365FC/overview DDZ )。