如何使用ngFor在angular2中加載多個子組件？

Question

我使用angular2中的動態組件加載器創建了幾個具有給定名稱的子組件。 ＆我能夠使用其選擇器以靜態方式加載它們。

例如 我可以使用以下方式加載組件

<DYNAMIC-BODY-1>Loading</DYNAMIC-BODY-1>

但是我的問題是這些組件名稱存儲在json文件中。 因此，我想讀取該JSON文件並使用其變量名加載該組件。

例如 如果uiComponent="DYNAMIC-BODY-1"; 那么我應該能夠將我的組件加載為<{{uiComponent}}>Loading</{{uiComponent}}>

這是我的HTML：

<div class="row">
    <div *ngFor="#comp of record">        
        <div *ngFor="#pRow of comp.pageObj.pageRows">
            <div *ngFor="#sec of pRow.sections">
                <div *ngFor="#sRow of sec.sectionRows" class="col-md-{{(12/3)}}">
                    <div *ngFor="#srColumn of sRow.secRowColumns">
                       //prints component name i.e. DYNAMIC-BODY-1
                       {{srColumn.uiComponent}} 
                       //Loads the component
                       <DYNAMIC-BODY-1>Loading</DYNAMIC-BODY-1>
                       //what I want to achieve,this does not work
                       <div [innerHTML]="'<' + srColumn.uiComponent+ '></' + srColumn.uiComponent + '>'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我嘗試了多種方法，但無法獲得結果。 有什么辦法嗎？

 import {Component,DynamicComponentLoader,Injector} from 'angular2/core'; import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common'; import {Http, Response} from 'angular2/http'; import {Observable} from 'rxjs/Rx'; import { DataService } from '../../app/services/data.service'; import {DynamicBody1Component} from './../DYNAMIC-BODY-1/DYNAMIC-BODY-1.component' import {DynamicBody2Component} from './../DYNAMIC-BODY-2/DYNAMIC-BODY-2.component' import {FooterComponent} from './../FOOTER/FOOTER.component' import {HeadingComponent} from './../heading/heading.component' import {ImageComponent} from './../IMAGE/IMAGE.component' import {StaticBodyComponent1} from './../STATIC-BODY-1/STATIC-BODY-1.component' import {StaticBodyComponent2} from './../STATIC-BODY-2/STATIC-BODY-2.component' @Component({ selector: 'Parser', providers: [DataService], templateUrl: 'app/Parser/Parser.component.html', directives: [DynamicBody1Component, DynamicBody2Component, FooterComponent,HeadingComponent,ImageComponent,StaticBodyComponent1,StaticBodyComponent2] }) export class ParserComponent { public record; public componentName; public absolutePath; constructor(dcl: DynamicComponentLoader, injector: Injector,private dataService: DataService) { } ngOnInit() { this.componentName="Parser"; this.absolutePath="app/"+this.componentName+"/"+this.componentName+"-MODEL.json"; this.dataService.getData(this.absolutePath) .subscribe((data:any[]) => { this.record = data; console.log(this.componentName); }); } subscribe({ complete: () => {setTimeOut(() => { dcl.loadAsRoot(DynamicBody1Component, '#dynamic-body-1', injector); dcl.loadAsRoot(DynamicBody2Component, '#dynamic-body-2', injector); dcl.loadAsRoot(FooterComponent, '#footer', injector); dcl.loadAsRoot(HeadingComponent, 'heading', injector); dcl.loadAsRoot(ImageComponent, '#image', injector); dcl.loadAsRoot(StaticBodyComponent1, '#static-body-1', injector); dcl.loadAsRoot(StaticBodyComponent2, '#static-body-2', injector); }, 1)}); } 

Answer 1

您不能以這種方式加載組件

<{{uiComponent}}>Loading</{{uiComponent}}>

您甚至無法以這種方式創建動態HTML。 要創建HTML，您可以

<div [innerHTML]="'<' + uiComponent + '></' + uiComponent + '>'"></div>

要動態添加組件，可以使用DynamicComponentLoader

您也不能在構造函數中使用dcl.loadAsRoot(...)代碼。 目前，動態創建的HTML尚不存在。
您可以嘗試將代碼移至

subscribe({/* process data - code omitted*/, 
    complete: () => {setTimeOut(() => {
    /* here the DOM should be rendered and dcl... should work */
    }, 1)});

等到數據到達，再給Angular時間渲染DOM。