[Перевод] 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: `
-
{{comment.text}}
`,
})
export class CommentComponent {
@Input() comments;
}
Как вы видите, мы вызываем компонент рекурсивно. В случае когда нет вложенных комментариев, чтобы не отображать компонент используется директива ngif.
App Component
@Component({
selector: 'my-app',
template: `
`,
})
export class App {
postComments = postComments;
}
Результат
Ссылки
пример на stackblitz
angular ru telegram