我正在读取angular2中的json文件。
到目前为止,我能够从json文件中获取数据。我在项目中创建了几个angular2组件,这些组件在此数据中有选择器。
我想使用此数据作为html标记加载我的所有组件。
即如果我得到col.uiComponent="HEADING"
,那么我想将其用作
<HEADING></HEADING>
所以,我需要这样做
<col.uiComponent> Loading.. </col.uiComponent>
我尝试使用此代码:
<div *ngFor="#srColumn of sRow.secRowColumns">
<{{srColumn.uiComponent}}>Loading </{{srColumn.uiComponent}}>
</div>
子组件
@Component({
selector: 'DYNAMIC-BODY-1',
templateUrl: 'app/DYNAMIC-BODY-1/DYNAMIC-BODY-1.component.html'
})
DYNAMIC-BODY-1.component.html
<div class="col-sm-4 divDynamic">
<table style="width:100%;">
<tr style="background-color:#B8B8B8">
<th>{{comp.data}}</th>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
</div>
使用DynamicComponentLoader我这样做了。
constructor(dcl: DynamicComponentLoader, injector: Injector,private dataService: DataService) {
dcl.loadAsRoot(DynamicBody1Component, 'DYNAMIC-BODY-1', injector);
}
我的子组件有选择器&#34; DYNAMIC-BODY-1&#34; 它显示我的错误如:
EXCEPTION: The selector "DYNAMIC-BODY-1" did not match any elements
Plz帮助。
答案 0 :(得分:1)
这不起作用。您无法使用动态绑定动态添加组件/指令。
Angular有DynamicComponentLoader为此强制添加组件
另见https://stackoverflow.com/search?q=%5Bangular2%5D+dynamiccomponentloader