我使用angular2中的动态Component加载器创建了几个具有给定名称的子组件。 &安培;我能够以静态方式使用选择器加载它们。
例如。 我可以使用
加载我的组件 <DYNAMIC-BODY-1>Loading</DYNAMIC-BODY-1>
但我的问题是这些组件名称存储在json文件中。 所以我想读一下JSON文件&amp;使用变量名称加载该组件。
例如。
如果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)});
}
答案 0 :(得分:3)
您无法以这种方式加载组件
<{{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。