Angular2无状态组件样式

Question

我在做什么：

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

我想做什么

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

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

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

我正在做什么来达到它。

在我的有状态视图html中，我放置了list组件，并使用Web Component的transclusion set设置了应该在里面重复哪种类型的小部件。

statefull view

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

列表组件

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

我的解决方案有什么问题

• 我需要将习惯对象传递到2个不同的地方，如果我没有通过那么会导致很难找到问题。
• 需要从应用视图处理ngFor。所以我正在做一些 list component 应该处理的事情。

结论

有没有更好的解决方案，我可以将list组件放入我的状态视图HTML中，并确定它应该包含哪些类型的小部件？

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

Answer 1

我发现在一个组件中创建 dom元素然后只是在另一个组件中重现它们很奇怪 - 你应该将模型传递给组件树（理想情况下更小和模型的较小部分）使用属性。在您的特定示例中，我没有看到DOM的两个真正不同的部分，因此我根本不会使用嵌套组件。