对于组件交互,哪种方法最好@ Input,@ output或使用服务 [英] For component interaction which method is best @Input, @output or using service

查看:111
本文介绍了对于组件交互,哪种方法最好@ Input,@ output或使用服务的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在angular6中有一些关于组件交互的查询.对于组件交互,我们有@ Input,@ Output,viewChild和services之类的方法.但是在大多数情况下,我们将使用服务.

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.

  1. 在什么情况下,我们需要使用@ Input,@ Output和viewChild在我们的应用程序中传递值

  1. 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 -

input属性绑定到模板中的DOM属性.期间 更改检测,Angular会自动更新data属性 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.

从文档开始,我们无需在更新Parent变量时更改数据,这意味着在对象引用不变之前,无需费心处理同步问题.

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 -来自文档

绑定到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更改,并且有一个新的子项与选择器匹配,则该属性为update.

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中,我们可以通过结合使用ViewChild访问的元素在组件模板中定义纯HTML元素.

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库,您可以高效地对数据进行集中(有限的数量)时间))在主题

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屋!

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