提供服务与将输入传递给组件 [英] Providing services vs passing inputs to components

查看:77
本文介绍了提供服务与将输入传递给组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

组件可以要求某种服务可用,并且还可以接受输入.它什么时候需要服务,什么时候需要输入?

解决方案

服务通常有助于提供与一棵组件树相同的东西.例如,对于应用程序中的所有组件,Http服务通常是相同的.试想一下,如果没有这样的服务.您将不得不重复很多相同的代码,或者在所有使用的地方传递实现.应用程序中的每个组件都必须将HttpService作为输入传递给其子级.

输入通常有助于将一件事提供给另一件事.例如,将完成百分比"传递到进度条是父母与孩子之间的紧密互动.试想一下,如果没有输入之类的东西.每次要在任何地方传递任何信息时,都必须创建一个服务,甚至只需设置文本框的值即可.

注意事项:

组件的父级或用户是否应该知道传入的数据或函数,或者它仅仅是程序的一部分还是组件树的一部分?例如,OrderComponent可能取决于OrderService. OrderComponent的父组件不必一定了解OrderService(它不知道应使用哪个OrderService,或者OrderService将使用哪种HttpService实现,等等),因此将其保留为服务是有意义的.对于进度条,直接上级当然知道完成百分比.如果不知道,为什么还要在其中放置进度栏?

传递的数据或功能是否与组件的用途直接相关?例如,对于HttpService的特定实现是所有OrderComponent的次要问题,而OrderComponent的主要任务是显示订单(无论如何执行),而完成百分比是进度条的主要问题.

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

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

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

A component can require that a certain service be available and it can also accept inputs. When should it require services, and when should it require inputs?

解决方案

Services are often good for providing one thing that is the same for a tree of components. For example, an Http service is usually the same for all components in your application. Imagine if there was no such thing as services. You'd have to duplicate the same pieces of code a lot or pass in the implementation of something everywhere its used. Every component in your application would have to pass the HttpService as input to its children.

Inputs are often good for providing one thing to one other thing. For example, passing the % complete to a progress bar is a tight interaction between the parent and child. Imagine if there was no such thing as inputs. You'd have to create a service every time you wanted to pass any information anywhere, even to simply set the value of a textbox.

Considerations:

Should the parent or user of your component be aware of the data or function that's being passed in, or is it a mere aspect of your program or part of your component tree? For example, an OrderComponent may depend on an OrderService. The parent component of OrderComponent should not necessarily know about the OrderService (it doesn't know which OrderService should be used, or which implementation of HttpService the OrderService will use etc), so it makes sense to keep it a service. For a progress bar, of course the direct parent knows the percent complete. If it doesn't know that, why is it even putting a progress bar there?

Is the data or functionality being passed directly relevant to the component's purpose? For example, the specific implementation of an HttpService is a secondary concern of any OrderComponent whose main job is to display the order (however it does that), whereas the percent complete is a primary concern of a progress bar.

Does your data change at runtime? Changing inputs trigger change detection, but a primitive value changing in a service does not. Services usually have functions, which don't change. If you have data in a service and need to use it in a component, you can put BehaviorSubjects or other Observables in the service and use the async pipe to display their values in a component template.

You may want to make a component expect a service but worry that two instances of that component in the same parent component would have to share the same provided service instance. You can avoid a parent component providing the same service to all of its children by creating another component in between that provides the service instead.

More on component interaction here: https://angular.io/docs/ts/latest/cookbook/component-communication.html

这篇关于提供服务与将输入传递给组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆