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

时间:2017-03-13 12:27:15

标签: angular

我的应用有一个主页,其中包含一个复杂的数据表组件。目前,home组件加载所有服务,然后将它们注入到数据表中,这非常简单,但是当我必须加载一些数据时会变得更复杂,比如说行点击事件。

我的问题是: 如果页面加载服务然后将数据注入组件或组件是否应该自己担心它会更好吗?我想从最佳实践开始,避免任何未来的陷阱

2 个答案:

答案 0 :(得分:3)

根据场景,您必须为每个组件做出决定,因为它完全取决于用例。

我会说你的组件应该只使用服务并请求数据。它应该不关心如何&从哪里检索数据,因为它处理服务以处理如何&哪个部分。

将您的组件视为智能和愚蠢的组件。

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

Dumb(无状态)组件将仅用于呈现给用户,并期望数据通过输入绑定作为属性。因此,该组件将始终期望来自父组件的数据。如果它使用绑定获取所有必需的数据,它将只在您的应用程序中的任何位置工作。

组件概念:

组件概念背后的理念是制作应用程序的一小部分并使其可重用。因此,您需要决定如何重复使用组件。

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

<强>案例-1: 如果您的应用只需要一个视图,其中product-detail将始终作为嵌套组件存在于product-list组件中,您只需要将此列表组件设置为智能组件。

选择产品项目后,它会使用名为product的输入属性将该项目传递给product-detail组件。

在这种情况下,如果第一次调用中已存在用户需要的所有信息,则无需进行另一次HTTP调用即可获取产品详细信息。

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

<强>案例-2: 如果您的应用可能需要在没有父列表的情况下将产品详细信息放在其他位置,那么请允许此产品详细信息组件直接使用服务。

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

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

I have a blog post使用product-list和product-detail组件,两者都使用服务来获取数据。

答案 1 :(得分:1)

这是整个&#39; smart vs presentational&#39;组件(或有状态与无状态组件)再次讨论。 Angular University has a blog article about this如果您想了解更多内容。

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

如果您的大多数组件都设置为表示/哑组件,那么它有望导致系统不那么复杂。