Angular2无状态组件样式 我在做什么：

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

我想做什么 我想创建包含重复小部件的通用组件

列表
。
它们可以有几种类型：


简单项
习惯小部件项
另一个小部件项

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

我在做什么来达到它。
在我的statefull视图html中，我放置
列表
组件，并使用Web组件的转换设置应该在其中重复的小部件类型

全州视图


列表组件


我的解决方案有什么问题

我需要将habits object传递到两个不同的位置，如果我不传递相同的位置，将导致难以发现问题
需要从应用程序视图处理ngFor。所以我在做一些列表组件应该自己处理的事情

结论
有没有更好的解决方案可以让我把
列表
组件放在statefull视图HTML中，并决定它应该包含什么类型的小部件

当然，我将创建所有这些小部件。
我发现在一个组件中创建dom元素，然后在另一个组件中简单地复制它们是很奇怪的-您应该使用属性将模型向下传递到组件树中（理想情况下是模型的越来越小的部分）。在您的特定示例中，我看不到DOM的两个真正不同的部分，因此我根本不会使用嵌套组件。
无状态和影子DOM与这两者有什么关系？我猜你是指Polymer的
，它允许将孩子投射到另一个组件的视图中-是这样吗？在Angular2中，这是
。我研究了一个类似的列表实现。我认为这是可能的，但不太容易。您可以只使用
*ngFor
，只使用执行数据操作的类而不是组件。否则，我认为一个起点是
TemplateRef
类和
NgFor
实现。我正在创建的这些组件是无状态的。它们应该是愚蠢和普通的。好吧，那我想是对的。shadowdom本身并不是真正意义上的转换，而是由
或
标记实现的。Angular2默认为
enclosuration:viewenclosuration.Emulated
，它不是阴影DOM。要启用阴影DOM，您需要在每个组件上设置
封装：ViewEncapsulation.Native
，但这与您的问题无关。在Angular 2中，无论是否使用阴影DOM，转换的工作原理基本相同。
<list [items]="habits">
  <div elements>
    <list-item *ngFor="#item of habits"
               [item]="item"></list-item>
  </div>
</list>

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