对于组件交互，哪种方法最好@Input、@output 或使用服务 [英] For component interaction which method is best @Input, @output or using service
问题描述
我对 angular6 中的组件交互有一些疑问.对于组件交互，我们有@Input、@Output、viewChild 和服务等方法.但大多数情况下我们会使用服务.
I am having some queries regarding component interaction in angular6.For component interaction we are having methods like @Input, @Output, viewChild and services. But most of the cases we will use services.
在什么情况下我们需要使用@Input、@Output 和 viewChild 在我们的应用程序中传递值
At what situation we need to use @Input, @Output and viewChild for passing values in our application
@Input、@Output 和 viewChild 方法有什么限制吗?
@Input, @Output and viewChild method having any limitations?
我们能否使用@Input、@Output 方法传递大量数据或值数组.
Can we pass large amount of data or array of values Using @Input, @Output method.
我们可以在本地范围内使用@Input 和@Output 吗?请帮我澄清我的疑惑
Can we use @Input and @Output within local scope? Please help me to clarify my doubts
推荐答案
@Input - 来自文档
输入属性绑定到模板中的 DOM 属性.期间更改检测，Angular 自动更新数据属性DOM 属性的值.
The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property's value.
当您的组件具有父子关系时，这种方法很有用.这是将数据从父级传递给子级的简单方法.
This approach is useful when your Components having Parent and Child relation. This is simple approach to pass the data from Parent to Child.
根据文档，当父变量更新时，我们不需要更改数据，这意味着在对象引用未更改之前无需担心同步.
As from the docs we don't need to change the data when Parent variable gets updated, that means no need to bother about the Synchronization until the object reference doesn't change.
@Output - 来自文档
绑定到输出属性的 DOM 属性会在更改检测期间自动更新.
The DOM property bound to the output property is automatically updated during change detection.
当您想通知父组件有关子组件中已完成的某些操作时，此方法很有用.
This is approach is useful when you want inform Parent Component about some action is done in Child Component.
您也可以将数据从子组件传递到父组件，但实际用例是更改检测.当您想根据子组件操作在父组件中执行某些操作时.
You can also pass the data from Child Component to Parent Component but the actual use-case is change detection. When you want perform some operation in the Parent Component depending on Child Component actions.
@ViewChild - 来自文档
配置视图查询的属性装饰器.更改检测器在视图 DOM 中查找与选择器匹配的第一个元素或指令.如果视图 DOM 发生变化，并且新的子级与选择器匹配，则属性为更新.
Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is update.
当你想从子组件访问多个属性时它很有用，在 Angular 中，我们可以在组件模板中定义纯 HTML 元素，通过组合可以访问的 ViewChild.
It is useful when you want to access more than one property from Child Component and In Angular we can define plain HTML elements in component template by combining which can accessed with ViewChild.
如果你想使用更多的子属性来做父组件中的操作，那么它很有用.
If you want use more Child Properties for doing the operations in Parent Component then it is useful.
服务 -- 来自文档
服务是在互不认识的类之间共享信息的好方法.
Services are a great way to share information among classes that don't know each other.
正如文档中所述，当您希望在多个组件之间共享数据并且它们之间没有关系时，这些类非常有用.
As Stated in the docs these classes are useful when you want share the data across multiple components and There is no need to to be relation between them.
服务可以依赖于其他服务，通过使用外部服务，您可以将数据集中到一个负责管理和更新数据的外部对象中.
Services can depend on other services and by using an external service you are centralizing data into one external object that is responsible to manage and update data.
借助最新的 RxJS 库，您可以高效地集中数据(对于有限的品脱时间)在 Subject 和 行为主体.
With help of latest RxJS Libary you can centralize data in efficient way (for limited pint of time) with help of Subject and Behavior Subject.
这篇关于对于组件交互，哪种方法最好@Input、@output 或使用服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
