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