如何使用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。