Спасибо за статью, Кристиан.
Недавно я остановился на похожей архитектуре, основанной на некоторых работах Исаака Манна.
Впервые натолкнулся на идею использования TemplateRefs в качестве реквизита рендеринга в React в своем курсе Egghead Advanced Angular Component Patterns. Стоит проверить, есть ли у вас подписка Egghead.
Проблема, с которой я столкнулся, заключалась в том, что у меня было три списка элементов с очень похожими данными, и вначале все они выглядели в основном одинаково.
Здесь и там было несколько небольших отличий, но мы их обошли с помощью объекта конфигурации. Некоторое время это работало нормально, но, как и в случае с программным обеспечением, элементы начали расходиться.
Я обнаружил, что добавляю больше *ngIf, чем меня устраивало, и поэтому я начал искать альтернативные способы построения элементов.
К счастью, я смотрел курс Исаака, и, по крайней мере, мне было с чего начать.
Очень просто, архитектура, которая у меня есть сейчас,
<list-container>
<ng-template let-item="item">
<list-item [item]="item"></list-item>
<ng-template>
</list-container>
Тогда внутри list-container это выглядит примерно так:
<div *ngFor="let item of items">
<ng-template [ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{ item: item }">
</ng-template>
</div>
Компонент контейнера обрабатывает всю работу со списком, такую как разбиение на страницы, сортировка, выбор и т. д., а элемент списка — это то, что вы передаете в качестве выходного элемента шаблона для отображения. Позволяет вам лучше контролировать отображение пользовательского интерфейса, как описано в этой статье.
Я бы хотел, чтобы в сообществе Angular было больше дискуссий об архитектуре компонентов пользовательского интерфейса. Я думаю, что это одна из областей, где сообщество React гораздо более креативно.
Я обнаружил, что когда ваш вариант использования выходит за рамки простой архитектуры компонентов ввода и вывода, обсуждение сразу же переходит к NgRx, который я не заинтересован в представлении.
