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

我用angular2中的動態組件加載器創建了幾個具有給定名稱的子組件。 &我能夠使用他們選擇在靜態的方式來加載它們。如何使用ngFor在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)}); 
 
}

來源

2016-02-15 Bhushan Gadekar

不能裝載組件這樣

<{{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)});

等到到達的數據，比多一點給角的時間來渲染DOM。

來源

2016-02-15 12:51:52

我已經使用動態組件裝載兄弟，但我無法弄清楚如何使用內部循環？ –

我明白了。我更新了我的答案。如果以這種方式創建HTML，則可以使用標籤作爲「DynamicComponentLoader」的目標。我將不得不再次檢查您的DCL代碼。 –

我想它應該工作。 –

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

回答

相關問題