Рекурсивная загрузка компонентов с помощью рекурсивного массива

Я пытаюсь загрузить компонент Angular 2 рекурсивно с рекурсивным массивом (plunk:http://plnkr.co/edit/3npsad?p=preview).

Учитывая этот рекурсивный массив:

[
  {
    "id": 1,
    "text": "abc"
  },
  {
    "id": 2,
    "text": "def",
    items: [
      {
        "id": 21,
        "text": "def-1",
        items: [
          {
            "id": 211,
            "text": "def-1-1"
          },
          {
            "id": 212,
            "text": "def-1-2"
          }
        ]
      },
      {
        "id": 22,
        "text": "def-2"
      }
    ]
  }
]

Мне нужен следующий вывод:

<my-item>
    <div id="1" text="abc"></div>
</my-item>
<my-item>
    <div id="2" text="def"></div>
    <my-item>
        <div id="21" text="def-1"></div>
        <my-item>
            <div id="211" text="def-1-1"></div>
        </my-item>
        <my-item>
            <div id="212" text="def-1-2"></div>
        </my-item>
    </my-item>
    <my-item>
        <div id="22" text="def-2"></div>
    </my-item>
</my-item>

Я мог только визуализировать первый уровень ввода, как показано в моем плане. Как я могу заставить свой компонент рекурсивно повторять и выводить желаемый результат? Входной массив может содержать любое количество элементов и вложенности.

Спасибо!

Ответы на вопрос(3)

Решение Вопроса

Обновить

С введением@NgModule и миграцияdirectives в@NgModule forwardRef не должно быть больше необходимости.

оригинал

<my-item *ngFor="let itm of items" [id]="itm.id" [text]="itm.text" [items]="itm.items" >
</my-item>
@Component({
  selector: 'my-item',
  styles: ['div {padding-left: 32px;}']
  providers: [],
  template: `<div>{{id}} - {{text}}
    <my-item *ngFor="let itm of items" [id]="itm.id" [text]="itm.text" [items]="itm.items" >
    </my-item>
    </div>

  `,
  directives: [forwardRef(()=> ItemComponent)]
})
export class ItemComponent {
  @Input() id: string;
  @Input() text: string;
  @Input() items: any[];
  constructor() {
  }
}

forwardRef требуется, потому что классItemComponent ссылается до того, как объявлено.

Пример плунжера

 Niner08 авг. 2016 г., 16:54
Вот Это Да! именно то, что мне нужно, плюс больше. Благодарю.

чтобы начать. Вам нужно самостоятельно реализовать функцию возврата HTML:

  var a = [
  {
    "id": 1,
    "text": "abc"
  },
  {
    "id": 2,
    "text": "def",
    items: [
      {
        "id": 21,
        "text": "def-1",
        items: [
          {
            "id": 211,
            "text": "def-1-1"
          },
          {
            "id": 212,
            "text": "def-1-2"
          }
        ]
      },
      {
        "id": 22,
        "text": "def-2"
      }
    ]
  }
];

function iterateRecursive(array) {
    for(var i = 0; i < array.length; i++) {
    if(array[i].items) {
        console.log(array[i].text);
      //uncomment: printHtml(array[i].id, array[i].text);
        iterateRecursive(array[i].items)
    } else {    
        console.log(array[i].text);         
    }

  }
}


iterateRecursive(a);

//implement this function that takes an id and text and returns html
//call it in place of console log
function printHtml(id, text) {

}
 Niner08 авг. 2016 г., 07:24
Но мне нужно решить эту проблему при загрузке компонента Angular 2, а не только с помощью JavaScript. Нет проблем, просто перебирая рекурсивный массив в javascript. Проблема заключается в рендеринге вывода через компонент Angular 2.
 Bruno Bruzzano03 мая 2018 г., 13:12
Как утверждает Niner, ваше решение не относится к Angular2 +.

Я бы создал ваш компонент так:

@Component({
  selector: 'my-item',
  template: `
    <div id="data.id" text="data.def"></div>
    <my-item *ngFor="let item of items" [data]="item"></my-item>
  `
})
export class MyItemComponent {
  @Input() data: any;
}

и назовите его компонентом из другого компонента и предоставьте данные всего компонента:

@Component({
  selector: 'other-comp',
  template: `
    <my-item [data]="data" *ngFor="let data of wholeData"></my-item>
  `
})
export class OtherComponent {
  wholeData = [
    {
      "id": 1,
      "text": "abc"
    },
    (...)
  ];
}
 Niner08 авг. 2016 г., 08:26
Это рекурсивно загружает весь массив через все вложенные элементы? Кажется, только перейти на 2-й уровень.
 Thierry Templier08 авг. 2016 г., 08:28
Да, потому что компонент использует себя в своем собственном шаблоне ...

Ваш ответ на вопрос