使用Angular 2

Question

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

除非您希望使用ResourceList呈现尚未位于服务器上的资源列表，但它们是在客户端上临时生成的，否则这样可以正常工作。另一个例子是使用ResourceCreate来输入资源信息，但是将其保存在本地而不是服务器上。在上述两种情况下，在组件中使用Http服务是多余的。

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

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

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

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

提前致谢。

Answer 1

根据angular.io

  

组件控制我们可以称之为视图的屏幕空间补丁

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

此外，如果不在视图中放置元素，则无法创建体系结构。任何组件的通信部分应独立于视图。

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