【问题标题】：What is the best approach to render data in Angular?在 Angular 中呈现数据的最佳方法是什么？
【发布时间】：2020-06-12 04:33:12
【问题描述】：

我在一个数组中有多个发布数据。我想渲染每个帖子。有两种渲染方法：

1：创建一个可复用的组件，并在*ngFor内部多次调用

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

2：创建组件并在组件内部传递数组

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

【问题讨论】：

根据智能。 - Dumb Component principal 它应该是第一种方法该规则。假设你想在某处重用 render-post 组件！！！
要在某处重用 render-post 组件，也可以像第二种方法一样传递帖子。
这取决于您的 2 个组件的复杂程度。是的，可能有 2 个组件。一个是帖子列表，另一个是个人帖子。所以你的问题不是真的有效，因为你本质上是在谈论 2 个组件，和。如果您的很复杂，其中包含除之外的其他子组件，您可以为它定义一个特定的组件，即方法 1。

标签： angular mean-stack angular-data angular-renderer

【解决方案1】：

你越碎成小块越好。

我会整天和第一个一起去。它呼应了单一职责原则，每个组件都必须具有独特的职责并做好。 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>

【讨论】：