提供服务与将输入传递给组件

Question

组件可能要求某项服务可用，并且它也可以接受输入。什么时候需要服务，何时需要输入？

Answer 1

服务通常很适合为组件树提供一个相同的东西。例如，对于应用程序中的所有组件，Http服务通常是相同的。想象一下，如果没有服务这样的东西。你必须经常复制相同的代码片段，或者通过它所使用的任何地方的实现。应用程序中的每个组件都必须将HttpService作为输入传递给其子组件。

输入通常有助于为另一件事提供一件事。例如，将％complete传递给进度条是父和子之间的紧密交互。想象一下，如果没有输入这样的东西。每次想要在任何地方传递任何信息时，您都必须创建服务，甚至只需设置文本框的值。

考虑：

组件的父级或用户是否应该知道传入的数据或功能，或者它只是程序或组件树的一部分？例如，OrderComponent可能取决于OrderService。 OrderComponent的父组件不一定知道OrderService（它不知道应该使用哪个OrderService，或OrderService将使用哪个HttpService实现等），所以保持它是有意义的这是一项服务。对于进度条，当然直接父母知道完成百分比。如果它不知道，为什么甚至在那里设置进度条呢？

传递的数据或功能是否与组件的目的直接相关？例如，HttpService的特定实现是任何OrderComponent的次要问题，其主要工作是显示顺序（但是它会这样做），而完成百分比是进度条的主要关注点。

您的数据是否在运行时更改？更改输入会触发更改检测，但服务中的原始值不会更改。服务通常具有不会改变的功能。如果您在服务中有数据并且需要在组件中使用它，则可以将BehaviorSubject或其他Observable放入服务中并使用async管道显示其值组件模板。

您可能希望使组件期望服务，但担心同一父组件中该组件的两个实例必须共享同一个提供的服务实例。您可以通过在提供服务的中间创建另一个组件来避免父组件为其所有子组件提供相同的服务。

有关组件交互的更多信息： https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

这是一个很好的问题。我认为答案取决于您是否需要一个与服务耦合的组件，或者您是否需要一个更易配置且独立的组件。

两者都有用例。例如，组件可能依赖服务来获取其数据。关于这一点的好处是，从调用组件配置的更少（您不必传入数据 - 它只是开箱即用）。另一方面，当您想要传入数据时，它会使组件的可插拔性降低。

不具有服务依赖性（即获取数据）的组件在各种其他上下文中可能更有用。例如，不是依靠服务来获取其数据，而是可以通过其@Input属性从父组件传入数据。

Answer 3

我会说，您应该使用：

服务

• 无论父子组件都必须对数据进行更改
• 数据生存期应大于父子组件。
• 数据在组件生命周期的开始并不重要（订阅并响应更改）
• 数据在子组件之外很重要并且是必需的

输入和输出

• 数据将仅用作“只读”
• 未在多个组件之间共享
• 数据必须在组件生存期的开始（onInit）处存在。
• 该数据不是必需的，也不在组件外部（对于孩子可能死亡）。
• 子构造函数为默认[空]

这将提供更好的数据流可见性和子组件的去耦。

示例：

服务：

  

父项包含产品>子级渲染和编辑产品/添加到购物车/订购产品

输入和输出：

  

父包含产品>子渲染/处理，但不创建额外的数据或编辑当前数据。