在 Angular 中呈现数据的最佳方法是什么？

Question

我在数组中有多个 post 数据。我想渲染每个 post。 有两种渲染方法：

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

越碎越好。

我会整天选择第一个。 它与单一职责原则相呼应，每个组件都必须具有独特的职责并做好它。 RenderPostComponent一定是渲染一个post的方式，而且一定要做好。您仍然可以创建另一个组件，它是前一个组件的父组件，它可以是 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>