Angular 动态嵌套组件

Question

I want to create components dynamically from given json. The first level is TestComponent who can have many TestLayerComponent. The problem is that TestLayerComponent also can have many TestLayerComponents. I use this to make slide push menu dynamically. If Layer path starts with Europe create <li> with text Europe, if Europe have Balkans create new <ul> in Europe with <li> Balkans and etc.

The menu must look like this but implement with components not with 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"
     ]
   },
  ]

}
]

Here is my code that I try but still display only last component.

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

Answer 1

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++;
  }
}