创建MD-手风琴内动态MD - 膨胀 - 面板组件

Question

我动态创建MD-手风琴组件内部部件如下面

<md-accordion [displayMode]="displayMode" [multi]="multi" 
       class="md-expansion-demo-width"> 
    <ng-container #piechartsContainer> 

    </ng-container> 
</md-accordion> 

@ViewChild("piechartsContainer", {read: ViewContainerRef}) pieChartContainer: ViewContainerRef; 

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(CreatePieChartElement); 
let componentRef = this.pieChartContainer.createComponent(componentFactory); 

这里我插入

@Component({ 
    selector: 'app-create-pie-element', 
    template: 
    <md-expansion-panel> 
     <md-expansion-panel-header>{{title}}</md-expansion-panel-header> 
    </md-expansion-panel> 
    , 
    styles: [], 
    encapsulation: ViewEncapsulation.None, 
}) 

组件据根据角度显而易见，它将在html结构中看起来为<md-accordion><app-create-pie-element><md-expansion-panel>....。如何实现<md-accordion><md-expansion-panel>这个结构，

This答案在循环创建组件时很有用。请帮帮我。提前致谢。

Answer 1

一个可能的解决方案是具有ng-template将包装CreatePieChartElement模板：

CreatePieChartElement.html

<ng-template #tmpl> 
    <md-expansion-panel> 
    <md-expansion-panel-header>{{title}}</md-expansion-panel-header> 
    <p>Some text</p> 
    </md-expansion-panel> 
</ng-template> 

CreatePieChartElement.ts

@ViewChild('tmpl') template: TemplateRef<any>; 

然后在父组件

let componentFactory = this.resolver.resolveComponentFactory(CreatePieChartElement); 
let componentRef = componentFactory.create(this.pieChartContainer.injector); 
... 
this.pieChartContainer.createEmbeddedView(componentRef.instance.template); 

Plunker Example