我开始使用angular2并希望创建一个todo-list网络应用程序。用户界面应该包含两个页面（=组件），可以通过JavaScript滑入/滑出。
第一个显示垂直列表中的所有待办事项，另一个显示单击列表中的待办事项时的其他详细信息。
我现在问自己，angular2声明页面组件的正确方法是什么？
我应该像这样构建一个通用组件吗？
<page type="list"></page>
<page type="detail"></page>
或者我应该为每个页面创建一个新组件吗？
<listpage></listpage>
<detailpage></detailpage>
答案 0 :(得分：2)
一般来说，在不了解更多细节的情况下，我的直觉是后者更合适，即为每个页面创建一个新组件。
您需要两种基本不同类型的实体：
您提出的第一个解决方案，即通用组件，将更适合于所有共享一些基本底层结构但在某些（但不是全部）细节上不同的多个实体，例如，两个不同的集合视图都列出所有项目，但以两种不同的方式格式化这些项目。要将该策略强制用于您的用例，需要您的通用page组件没有通用共享结构：您在todo-list集合和该集合中的单个待办事项之间共享什么模板或逻辑？一切都取决于type属性的值。那么page会有什么含义？基本上没什么。
你的后一个建议，即对这两个不同的实体有两个不同的组成部分，似乎更符合如何使用角度组件的真正精神。
我想有人可能会争辩说，更通用的page组件/视图可能会为list视图和detail视图保留一些有价值的结构，例如主标题，导航链接，用户信息等。但是，即使您实现了这一点，我认为您最终还是要为整个列表创建单独的（更深层次嵌套的？）组件而不是单个项目，最终会返回即将实施你的后一个建议。
我认为一个有用的模型是官方Angular2网站上提供的示例代码。我可以指出几个不同的例子，但我认为与你的情况最相似的是在"Routing & Navigation" heading下的“高级文档”部分。在那里，他们提供了按如下方式分隔组件的代码：
hero-list.component：这似乎与您的listpage。hero-detail.component：这似乎与您的detailpage。显然，他们已将应用程序的这两部分分离为不同的组件。
此类策略决策还可能取决于“实体”的大小/复杂程度。如果您的“列表”和“详细信息”视图都非常简单，我想您可以在单个组件中区分它们（例如page），只使用属性（例如type）。但是，在todo应用程序中，我无法想象列表视图或详细视图是非常简单的。因此，尝试将两者压缩成单个page组件会使组件过于复杂。