Angular 2如何从json动态创建组件

Question

我有一些来自json的数据，我应该动态创建并粘贴这些组件到页面。我有4种元素类型（文本，视频，链接，图像）。

1: [
        {
            type: 'Text',
            id: 1,
            active: true
            data: {x: 10,y: 20,width: 150,height: 50,text:"Text",fontSize: 14}'
        },
        {
            type: 'Video',
            id: 2,
            active: true
            data: {x: 30,y: 40,width: 200,height: 100,src:"http://bbbbbb"}
        }
    ],
    2: [
        {
            type: 'Link',
            id: 3,
            active: true
            data: {x: 10,y: 20,width: 150,height: 50,url:"http://bbbbbb"}
        }
    ],
    3: [
        {
            type: 'Image',
            id: 3,
            active: false
            data: {
                x: 10,
                y: 20,
                width: 300,
                height: 100,
                src: 'http://bbbbbb'

            }
        }
    ]

我为这些具有常规属性的元素创建了一个父类。

export abstract class Element implements IElement{

  x: number;
  y: number;
  width: number;
  height: number;
  active: boolean;
  id: number;

}

export interface IElement {
  x: number;
  y: number;
  width: number;
  height: number;
  active: boolean;
  id: number;
}

但我不明白我如何扩展抽象父类并动态地将这些元素粘贴到组件，如：

 <text></text>
 <video></video>
 <image></image>