在Angular 4中動態加載圖表組件嗎？

Question

我在Angular 4中創建了許多可重用的圖表組件。所有用於繪制圖表的數據均來自REST API。 當我加載父組件時，將以以下格式獲取圖表列表的數據。

[
   {
      "chartId":1,
      "chartType":"Bar"
   },
   {
      "chartId":2,
      "chartType":"Pie"
   }
]

我正在為圖表組件使用屬性選擇器。 例如，

<div app-bar-chart></div>

我想做的是，我需要遍歷圖表列表JSON，然后根據“ chartType”設置屬性。 例如，如果“ chartType”為“ Pie”，則元素應為，

<div app-pie-chart></div>

我該如何實施？ 謝謝。

Answer 1

您可以設置屬性，但不會在那里啟動組件。

這是您的操作方法。 創建一個JSON，其中包含對組件類的引用，而不是字符串：

export class BarComponent {...}
export class PieComponent {...}

...

const components = [
    {
        "chartId": 1,
        "chartType": BarComponent < ---component class reference
    },
    {
        "chartId": 2,
        "chartType": PieComponent
    }
]

然后使用NgComponentOutlet渲染這些組件：

<ng-container *ngFor="let c of components">
     <ng-container *ngComponentOutlet="c"></ng-container>

閱讀這些文章以獲取更多信息：

• 使用ViewContainerRef探索Angular DOM操作技術
• 這是您需要了解的有關Angular中的動態組件的知識