如何正确决定Angular 2中的组件应该是什么?

时间:2016-11-13 13:20:00

标签: html5 angular architecture web-component

我发现Angular 2组件非常好,因为我们可以写下我们自己的HTML元素,这些元素适合我们正在构建的应用程序,但是,因为我开始使用Angular 2,我觉得我'我用错误的方式使用它们。

我使用组件的方式,以及我似乎其他人在做的事情,就是在组件和视图之间进行1-1对应。

换句话说,对于应用程序的每个视图,只创建一个组件并使用路由器来触发活动组件。

所以在这个设置中,会有像这样的组件:

  • 仪表板组件 - 它是仪表板视图
  • 用户个人资料组件 - 它是用户个人资料视图
  • 销售清单组件 - 它是销售清单视图
  • 销售编辑器组件 - 它是销售编辑器视图,用于添加新销售或更新一个

等等。我的意思是,这有效,但我觉得这是使用组件的错误方法。在我看来,某些组件应该比那更细粒度。

如何正确决定Angular 2中的组件必须是什么?是否真的应该在组件或视图之间进行1-1映射?如果没有,决定我们需要构建哪些组件的正确方法是什么?

2 个答案:

答案 0 :(得分:2)

一个好的经验法则是避免重复。如果您发现自己复制粘贴代码 - 在组件中提取该代码。

另一个规则是简单。如果一个组件类变得太大 - 将它分成较小的独立部分。

答案 1 :(得分:1)

这个问题主要是基于意见的,不适合SO。

您上面构建组件的时间列表是正确的,

组件可以包含零到多个组件。

如果您查看https://github.com/angular/material2,您会看到输入元素,按钮,工具提示等的简单组件可用于更复杂的组件,如标签,菜单,对话框。

与类设计一样,构建一个组件来完成一件事并做得很好。然后使用这个基本组件构建更复杂的组件。