Angular Вложенные динамически компоненты - PullRequest
Новая
       17

Angular Вложенные динамически компоненты

0 голосов
/ 25 мая 2020

Я хочу динамически создавать компоненты из заданного json. Первый уровень - это TestComponent, у которого может быть много TestLayerComponent. Проблема в том, что TestLayerComponent также может иметь много TestLayerComponent. Я использую это для динамического создания меню слайдов pu sh. Если путь слоя начинается с Европы, создайте <li> с текстом Европа, если в Европе есть Балканы, создайте новый <ul> в Европе с <li> Балканы и т.д. c.

Меню должно выглядеть как это , но реализовать с компонентами не с 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();
}

1 Ответ

0 голосов
/ 25 мая 2020 
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++;
  }
}
...