提供服务与向组件传递输入

Ale*_*lor 6 angular

一个组件可以要求某种服务可用,它也可以接受输入。什么时候需要服务,什么时候需要投入?

Ale*_*lor 5

服务通常有助于提供与组件树相同的东西。例如,Http 服务对于应用程序中的所有组件通常都是相同的。想象一下,如果没有服务这样的东西。您必须大量重复相同的代码片段,或者在其使用的任何地方传递某些内容的实现。应用程序中的每个组件都必须将 HttpService 作为输入传递给其子组件。

输入通常有助于将一件事提供给另一件事。例如,将完成百分比传递给进度条是父级和子级之间的紧密交互。想象一下,如果没有输入这样的东西。每次想要将任何信息传递到任何地方时,甚至只是简单地设置文本框的值,都必须创建一个服务。

注意事项:

组件的父级或用户是否应该知道传入的数据或函数,或者它仅仅是程序的一个方面或组件树的一部分?例如, anOrderComponent可能依赖于 an OrderService。的父组件OrderComponent不一定知道OrderService(它不知道应该使用哪个 OrderService,或者 OrderService 将使用哪个 HttpService 实现等),因此将其保留为服务是有意义的。对于进度条,直接父级当然知道完成百分比。如果它不知道这一点,为什么还要在那里放一个进度条呢?

传递的数据或功能是否与组件的用途直接相关?例如,对于任何OrderComponent其主要工作是显示订单(但它确实是这样做的)的人来说,HttpService 的具体实现是次要关注点,而完成百分比是进度条的主要关注点。

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

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

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