javascript - 如何在 Angular2 的模板 html 上呈现动态创建的数组组件？

Question

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

@Component({

    selector: 'dynamic-component',
    template: `<div #container><ng-content></ng-content></div>`

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

    public addComponent(ngItem: Type<WidgetComponent>,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面板)

<p-panel [style]="{'margin-bottom':'20px'}">
    <p-header>
        <div class="ui-helper-clearfix">
           <span class="ui-panel-title" style="font-size:14px;display:inline-block;margin-top:2px">Chart Widget</span>
            <div class="ui-toolbar-group-right">                
               <button pButton type="button" icon="fa-window-minimize" (click)="minimize()"</button>
              <button pButton type="button" icon="fa-refresh" (click)="refresh()"></button>
              <button pButton type="button"  icon="fa-expand" (click)="expand()" ></button>
             <button pButton type="button" (click)="close()" icon="fa-window-close"></button>
                    </div>
                </div>
    </p-header>
      some data
</p-panel>

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: '<ng-content></ng-content>'
})
export  class WidgetComponent{
}

现在我通过以下方式从现有组件(例如图表小部件和数据小部件)中选择一个组件来添加组件，并将实例存储到一个数组中。

@Component({
templateUrl: 'main.component.html',
entryComponents: [ChartWidget,  DataWidget], 
})
export class MainComponent implements OnInit {
private elements: Array<WidgetComponent>=[];
 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

 <dynamic-component [hidden]="true" ></dynamic-component>                           
 <widget *ngFor="let item of elements">
     <div [innerHTML]="item._ngEl.nativeElement.innerHTML | sanitizeHtml">
     </div>
 </widget>

我还实现了一个 sanitizeHtml 管道，但它给出的结果仍然相同。因此，据我所知，innerHTML 仅显示 html 数据，但我不能使用任何按钮事件以及 js 图表。我还尝试在标签下显示像 {{item}} 这样的项目。但它显示为文本 [object object]。那么，任何人都可以为此提供解决方案吗？如何呈现允许按钮事件和 js 图表的组件？谢谢。

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

Answer 1

我会创建这样的结构指令:

view.directive.ts

import { ViewRef, Directive, Input, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[view]'
})
export class ViewDirective {
  constructor(private vcRef: ViewContainerRef) {}

  @Input()
  set view(view: ViewRef) {
    this.vcRef.clear();
    this.vcRef.insert(view);
  }

  ngOnDestroy() {
    this.vcRef.clear()
  }
}

然后

app.component.ts

private elements: Array<{ view: ViewRef, component: WidgetComponent}> = [];

...
addComponent(widget: string ): void{
  let component = this.dynamicComponent.addComponent(this.WidgetClasses[widget]);
  let view: ViewRef = this.dynamicComponent.container.detach(0);
  this.elements.push({view,component});

  this.dynamicComponent.resetContainer();
}

和

app.component.html

<widget *ngFor="let item of elements">
  <ng-container *view="item.view"></ng-container>
</widget>

所以我刚刚将 View 从动态组件容器移动到所需位置。

Plunker Example