Каков наилучший подход для визуализации данных в Angular?

Question

У меня есть несколько данных поста в массиве. Я хочу сделать каждый пост. Существует два подхода к визуализации:

1: создать повторно используемый компонент и вызывать его несколько раз внутри * ngFor

 <div *ngFor="let post of posts">
     <render-post [post]="post"><render-post>
 </div>

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

<div>
     <render-post [posts]="posts"></render-post>
</div>

Answer 1

Чем больше вы разбиваетесь на мелкие кусочки, тем лучше.

Я бы go с первым за весь день. Это соответствует принципу единой ответственности, каждый компонент должен иметь уникальную ответственность и делать это хорошо. RenderPostComponent должен быть способом визуализации одного сообщения, и он должен делать это хорошо. Вы все еще можете создать другой компонент, родительский по отношению к предыдущему, который может быть RenderPostListComponent, который будет содержать ваш *ngFor и получит массив в параметре.

Таким образом, ваше окончательное решение представляет собой смесь обоих решений.

Шаблон RenderPostListComponent

<div *ngFor="let post of posts">
  <render-post [post]="post"><render-post>
</div>

Родитель шаблона RenderPostListComponent

<div>
     <render-post-list [posts]="posts"></render-post-list>
</div>