使用 Angular 2 处理 CRUD 组件的不同方法

Question

我目前正在使用 Angular 2 开发一系列 CRUD 组件。到目前为止，我在网上找到的所有示例在组件中都有 Http 服务。换句话说，创建资源的组件（我们称之为ResourceCreate）包括使用Http 类在远程服务器上创建资源的代码。同样，显示所有资源列表的组件（我们称之为ResourceList）包括使用Http 类从服务器获取资源列表的代码。

这很好用，除非您想使用ResourceList 来呈现尚未位于服务器上但它们是在客户端临时生成的资源列表。另一个示例是使用ResourceCreate 仅键入资源信息，但将其保存在本地而不是服务器上。在上述两种情况下，在组件中拥有Http 服务是多余的。

所以我对这些组件的想法如下：

• 创建父组件并附加所有 CRUD 子组件（例如，ResourceCreate、ResourceList）。
• 不要使用Http 来提交或接收数据，而是让父组件将数据传递给Input()s 或监听CRUD 子组件的Output() 事件。例如，让父组件执行Http 请求以获取资源列表，然后将该列表传递给ResourcetList 组件。另一个示例可能是让ResourceCreate 组件发出submit 事件以及资源描述。该事件将被父组件捕获，然后父组件将其提交给服务器。

通过使用这种方法，CRUD 组件对资源存储一无所知。因此，如果我们的资源位于本地或文件中，我们唯一需要更改的是父组件，而不是 CRUD 组件本身。这使得 CRUD 组件更具可重用性。

我试图了解这种方法是否存在缺陷。为什么我在 Internet 上找到的所有 CRUD 示例都没有使用这种方法，而是将 Http 服务嵌入到 CRUD 组件中？有什么想法吗？

提前致谢。

Answer 1

根据angular.io

一个组件控制一块我们可以称为视图的屏幕空间

这意味着理想情况下，我们应该创建具有与之关联的视图的组件。您的方法的缺点是您创建的组件将经历完整的组件生命周期，这在您的情况下将是一个开销，因为您没有任何与之关联的视图。

此外，如果不将元素放在视图中，您将无法创建架构。任何组件的通信部分都应该独立于视图。

更好的选择是创建一个服务来包装存储机制（本地 http/）并将其注入到 CRUD 组件中。这允许将 CRUD 组件与数据存储隔离。