[英]Angular Nested Dynamically Components
我想从给定的 json 动态创建组件。 第一层是TestComponent,可以有很多TestLayerComponent。 问题是TestLayerComponent 也可以有很多TestLayerComponent。 我用它来动态制作幻灯片推送菜单。 如果图层路径以欧洲开头,则使用文本欧洲创建<li>
,如果欧洲有巴尔干,则在欧洲创建新的<ul>
,使用<li>
巴尔干等。
菜单必须看起来像这样,但使用不使用 DOM 的组件实现。
[{
Username:"",
Password:"",
Maps:[
{
Name:"",
Title:"",
Layers:[
id:""
path:"Europe/Balkans/Greece"
]
},
{
Name:"",
Title:"",
Layers:[
id:""
path:"Europe/Balkans/Romania"
]
},
{
Name:"",
Title:"",
Layers:[
id:""
path:"Asia/China"
]
},
]
}
]
这是我尝试但仍仅显示最后一个组件的代码。
for (const map of maps) {
mapViewContainerRef.clear();
let mapRow = mapViewContainerRef.createComponent(mapFactory);
mapRow.instance.maps = map;
for (const layer of map.layers) {
mapFactory = this.menuFactory.resolveComponentFactory(TestLayerComponent);
mapViewContainerRef.clear();
mapViewContainerRef.createComponent(mapFactory);
mapRow = mapViewContainerRef.createComponent(mapFactory);
mapRow.instance.layers = layer;
}
mapRow.destroy();
}
for (const map of maps) {
mapViewContainerRef.clear();
let mapRow = mapViewContainerRef.createComponent(mapFactory);
let index = 1;
mapRow.instance.maps = map;
for (const layer of map.layers) {
mapFactory = this.menuFactory.resolveComponentFactory(TestLayerComponent);
mapRow = mapViewContainerRef.createComponent(mapFactory, index);
mapRow.instance.layers = layer;
index++;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.