在Angular 4中动态加载图表组件？

我已经在Angular 4中创建了许多可重用的图表组件。所有数据都绘制来自REST api的图表。当我加载父组件时，我将以下列格式获取图表列表的数据。在Angular 4中动态加载图表组件？

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

我正在使用图表组件的属性选择器。例如，

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

我想要做的是，我需要通过图表列表JSON遍历并按照“图图表”我需要设置的属性。例如，如果“图图表类型”是“馅饼”，那么元素应该是，

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

我如何能实现呢？谢谢。

来源

2017-08-03 shafeequemat

嘿，我的回答有帮助吗？ –

您可以设置属性，但不会在此处启动组件。

这里是你如何做到这一点。创建包含参照组件类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>

阅读这些文章以了解更多信息：

来源

2017-08-03 04:44:09

在Angular 4中动态加载图表组件？

回答

相关问题