Angular. Рекурсивный компонент

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

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

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

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: `
     <div *ngFor="let comment of comments">
      <ul>
       <li>
         {{comment.text}}
         <comments [comments]="comment.comments" 
             *ngIf="comment.comments"></comments>
       </li>
      </ul>
    </div>
  `,
})
export class CommentComponent {
  @Input() comments;
}

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

App Component

@Component({
  selector: 'my-app',
  template: `
   <comments [comments]="postComments"></comments>
  `,
})
export class App {
  postComments = postComments;
}

Результат

Ссылки

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