【问题标题】：Angular2 stateless components styleAngular2 无状态组件样式
【发布时间】：2016-02-06 17:35:52
【问题描述】：

我在做什么：

我正在使用带有 Angular 2 的无状态组件编写我的新应用程序。

我想做什么

我想创建包含重复小部件的通用组件list。它们可以有几种类型：

所以我可以创建习惯列表、用户列表等，而且它并不总是一张表格。它可以是任何小部件的列表。

在我的状态视图 html 中，我放置了 list 组件并使用 Web 组件的嵌入设置了应该在里面重复什么类型的小部件。

<list [items]="habits">
  <div elements>
    <list-item *ngFor="#item of habits"
               [item]="item"></list-item>
  </div>
</list>

<ng-content select="[elements]"></ng-content>

有没有更好的解决方案如何将list 组件放入我的全状态视图 HTML 中并决定它应该包含什么类型的小部件？

我当然会创建所有这些小部件。

【问题讨论】：

“无状态”和“影子 DOM”与这一切有什么关系？我猜你与 Polymer 的 <content> 相关，它允许将孩子投影到另一个组件的视图中 - 是这样吗？在 Angular2 中，这是<ng-content>。我看了一点类似的列表实现。我认为这是可能的，但不太容易。您可以只使用*ngFor 并使用一个执行数据操作的类而不是一个组件。否则我认为起点是TemplateRef 类和NgFor 实现。
Shadow DOM 被 Angular2 用作 translusion 的新替代方案。我正在创建的这些组件是无状态的。它们应该是愚蠢和通用的。
好吧，那我猜对了。 Shadow DOM 本身并不是真正的嵌入，但 <content> 或 <ng-content> 标签可以做到这一点。 Angular2 默认为 encapsulation: ViewEncapsulation.Emulated，它是 not shadow DOM。要启用影子 DOM，您需要在每个组件上设置 encapsulation: ViewEncapsulation.Native 但这与您的问题并不真正相关。在 Angular 2 中，无论有无 shadow DOM，Transclusion 的工作原理基本相同。

【解决方案1】：

我觉得在一个组件中创建 dom 元素 然后在另一个组件中简单地复制它们很奇怪 - 你应该将你的模型向下传递组件树（最好是更小且更小）模型的较小部分）使用属性。在您的特定示例中，我没有看到 DOM 的两个真正不同的部分，因此我根本不会使用嵌套组件。

【讨论】：