[Перевод] Angular. Рекурсивный компонент22.03.2018 11:03

Бывают ситуации, когда нужно отобразить дерево с неопределенным количеством вложенных однотипных данных и при этом желательно не дублировать код на каждом уровне.

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

Структура данных

const comments:Comment[] = [
  {
    text: "1",
    comments: [
      {
        text: "1.1",
        comments: [
          {
            text: "1.1.1 "
          }
        ]
      },
      {
        text: "1.2",
        comments: [
          {
            text: "1.2.1"
          }
        ]
      }
    ]
  },
  {
    text: "2",
    comments: [
      {
        text: "2.1",
        comments: [
          {
            text: "2.1.1"
          }
        ]
      }
    ]
  }
];

Это данные, которые мы ожидаем получить от сервера. Для текущего примера сделаем их статичными.

Comments component

@Component({
  selector: 'comments',
  template: `
     
      
       
         {{comment.text}}
         
       
      
    
  `,
})
export class CommentComponent {
  @Input() comments;
}

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

App Component

@Component({
  selector: 'my-app',
  template: `
   
  `,
})
export class App {
  postComments = postComments;
}

Результат

Ссылки

пример на stackblitz
angular ru telegram