组件是否应在angular2中加载自己的数据

组件是否应在angular2中加载自己的数据,angular,Angular,我的应用程序有一个主页,其中包含一个复杂的datatable组件。目前,home组件加载所有服务,然后将它们注入datatable,这相当简单,但当我必须在一个行单击事件上加载一些数据时,会变得更加复杂 我的问题是: 如果页面加载服务,然后将数据注入到组件中,是更好,还是组件应该自己担心呢?我想从最佳实践开始,避免任何未来的陷阱,这是您必须根据场景为每个组件做出的决定,因为这取决于用例 我认为您的组件应该只使用服务并请求数据。它不应该关心如何从何处检索数据,因为它是由服务来处理how&where

我的应用程序有一个主页,其中包含一个复杂的datatable组件。目前,home组件加载所有服务,然后将它们注入datatable,这相当简单,但当我必须在一个行单击事件上加载一些数据时,会变得更加复杂

我的问题是:
如果页面加载服务,然后将数据注入到组件中,是更好,还是组件应该自己担心呢?我想从最佳实践开始,避免任何未来的陷阱,这是您必须根据场景为每个组件做出的决定,因为这取决于用例

我认为您的组件应该只使用服务并请求数据。它不应该关心如何从何处检索数据,因为它是由服务来处理how&where部分的

将您的组件视为智能和哑组件

智能(有状态)组件使用服务获取数据,并在其模板中使用该数据

哑(无状态)组件将仅用于向用户演示,并期望通过输入绑定将数据作为属性。因此,该组件将始终需要来自父组件的数据。如果它使用绑定获得所有必需的数据,那么它将在应用程序中的任何位置工作

组件的概念:

组件概念背后的思想是使应用程序的小部分可重用。因此,这是一个决定,您需要确定您希望组件的可重用性

示例: 我们有一个产品列表组件和产品详细信息组件。产品列表组件使用名为ProductService的服务来获取数据

案例1: 如果您的应用程序只需要有一个视图,其中产品详细信息将始终作为嵌套组件存在于产品列表组件中,那么您只需要将此列表组件设置为智能组件

选择产品项后,它会使用名为product的输入属性将该项传递给产品详细信息组件

在这种情况下,如果用户所需的所有信息在第一次调用中已经存在,则不需要再进行一次HTTP调用来获取产品详细信息

如果您只拥有所选产品的子集产品信息,请查看下面的案例2

案例2: 如果您的应用程序可能需要在其他位置包含产品详细信息,而没有父列表,则允许此产品详细信息组件直接使用服务

因此,这将是一个独立的组件,不需要依赖任何其他组件

此组件只需要一个产品id作为输入,它将使用服务来获取该产品id的产品详细信息。因此,此组件可以在应用程序中的任何位置使用,包括产品列表组件内部,您只需将所选产品的id传递给此组件


它使用产品列表和产品详细信息组件,两者都使用服务来获取数据。

这是整个“智能组件与表示组件”(或有状态组件与无状态组件)的讨论。如果你想读更多

基本建议是限制与数据检索服务交互的组件的数量,并尽可能多地使用您可以从输入接收数据并将数据作为输出发送出去的组件。执行此操作的组件被视为无状态/表示/哑,因为其所有数据仅来自其输入。它就像编程语言中的纯函数——纯函数更容易推理,因为它没有副作用,其返回值完全取决于输入


如果您的大多数组件都被设置为表示/哑组件,那么很有可能会导致一个不太复杂的系统进行推理。

您的组件应该只使用服务和请求数据。它不应该知道或关心如何检索数据,这取决于服务。接下来,如果组件中有任何嵌套组件,只需使用
@input
binding传递数据即可。哇,答案非常快!谢谢大家!这正是我要找的!