在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中的动态组件的知识