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

【问题标题】：How to correctly decide what should be a component in Angular 2?如何正确决定 Angular 2 中的组件应该是什么？
【发布时间】：2017-03-27 05:38:49
【问题描述】：

我发现 Angular 2 组件非常好，因为我们可以编写适合我们正在构建的应用程序的自己的 HTML 元素，但是，由于我开始使用 Angular 2，我觉得我正在使用它们走错路了。

我一直在使用组件的方式，而且我似乎其他人也在这样做，是在组件和视图之间建立 1-1 的对应关系。

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

所以在这种情况下，会有这样的组件：

等等。我的意思是，这可行，但我觉得这是使用组件的错误方式。在我看来，不知何故，组件应该比这更细化。

应该如何正确地确定 Angular 2 中的组件必须是什么？真的应该在组件或视图之间进行这种 1-1 映射吗？如果不是，那么决定我们需要构建哪些组件的正确方法是什么？

【问题讨论】：

【解决方案1】：

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

另一个规则是简单。如果组件类变得太大 - 将其拆分为更小的独立部分。

【讨论】：

【解决方案2】：

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

您上面列出的何时构建组件是正确的，

但一个组件可以由零到多个组件组成。

如果您查看https://github.com/angular/material2，您会发现输入元素、按钮、工具提示等的简单组件...以及更复杂的组件（如选项卡、菜单、对话框）。

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

【讨论】：