如何在Angular2中的模板html上动态创建数组组件？

我通过选择预先存在的组件创建了动态组件实例.例如,

@Component({

    selector: 'dynamic-component',
    template: `
`

})
export class DynamicComponent {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; 

    public addComponent(ngItem: Type,selectedPlugin:Plugin): WidgetComponent {
    let factory = this.compFactoryResolver.resolveComponentFactory(ngItem);
    const ref = this.container.createComponent(factory);
    const newItem: WidgetCompOnent= ref.instance;
    newItem.pluginId =  Math.random() + ''; 
    newItem.plugin =   selectedPlugin;
    this._elements.push(newItem);                 
    return newItem;
  }
}

我之前存在的组件是ChartWidget和PatientWidget,它扩展了我想在容器中添加的类WidgetComponent.例如,

@Component({
selector: 'chart-widget',
templateUrl: 'chart-widget.component.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() => ChartWidget) }]
})

export class ChartWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
     close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

chart-widget.compoment.html(使用primeng面板)

    
        

           Chart Widget
            
                
               
              
              
             
                    
                
    
      some data

data-widget.compoment.html(与使用primeng面板的图表小部件相同)

@Component({
selector: 'data-widget',
templateUrl: 'data-widget.component.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() =>DataWidget) }]
})

export class DataWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
    close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

WidgetComponent.ts

@Component({
  selector: 'widget',
  template: ''
})
export  class WidgetComponent{
}

现在,我通过以下方式从现有组件(例如chart-widget和data-widget)中选择一个组件来添加组件,并将实例存储到一个数组中.

@Component({
templateUrl: 'main.component.html',
entryComponents: [ChartWidget,  DataWidget], 
})
export class MainComponent implements OnInit {
private elements: Array=[];
 private WidgetClasses = {
    'ChartWidget': ChartWidget,
    'DataWidget': DataWidget        
}
@ViewChild(DynamicComponent) dynamicComponent: DynamicComponent;  

 addComponent(): void{                         
   let ref= this.dynamicComponent.addComponent(this.WidgetClasses[this.selectedComponent], this.selectedComponent);    
   this.elements.push(ref); 

   this.dynamicComponent.resetContainer();                     
}
}

现在,我在main.component.html中使用innerHtml渲染组件时遇到问题.它渲染html但我无法使用按钮点击事件或其他事件.我也尝试使用primeng渲染图表,但它也不起作用.

main.component.html

我还实现了一个sanitizeHtml管道,但它给出了相同的结果.所以,据我所知,innerHTML只显示html数据,但我不能使用任何按钮事件以及js图表.我还尝试在标记下显示此{{item}}项.但它显示为文本[对象对象].那么,任何人都可以为它提供解决方案吗？如何渲染允许按钮事件和js图表的组件？谢谢.

编辑:在这里查看我的Plunker https://plnkr.co/edit/lugU2pPsSBd3XhPHiUP1?p=preview 您可以在这里看到,可以动态添加图表或数据小部件,我使用innerHTML显示它.所以,按钮事件在这里不起作用.如果我编码像{{item}}那么它会显示[object object]文本.您还可以在控制台中看到组件数组数据.主要问题是,我如何激活其上的按钮事件(例如,如果我点击关闭或刷新按钮,那么它将调用相关的功能)？