对于组件交互,哪种方法最好@ Input,@ output或使用服务

时间:2019-07-19 07:39:45

标签: angular6

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

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

  2. @ Input,@ Output和viewChild方法有任何限制吗?

  3. 我们可以使用@ Input,@ Output方法传递大量数据或值数组吗?

  4. 我们可以在本地范围内使用@Input和@Output吗? 请帮助我澄清我的疑问

1 个答案:

答案 0 :(得分:0)

@输入-From the Docs

  

input属性绑定到模板中的DOM属性。中   更改检测,Angular会自动更新data属性   DOM属性的值。

当您的组件具有父子关系时,此方法很有用。这是将数据从父级传递到子级的简单方法。

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

@Output -From the Docs

  

绑定到output属性的DOM属性会在更改检测期间自动更新。

当您想通知父组件有关子组件中完成的某些操作时,此方法很有用。

您还可以将数据从子组件传递到父组件,但实际用例是更改检测。如果要根据子组件操作在“父组件”中执行某些操作。

@ViewChild -From the Docs

  

用于配置视图查询的属性装饰器。变更检测器在视图DOM中查找与选择器匹配的第一个元素或指令。如果视图DOM更改,并且有一个新的子项与选择器匹配,则该属性为update。

当您要从子组件访问多个属性时非常有用,并且在Angular中,我们可以通过结合使用ViewChild访问的元素在组件模板中定义纯HTML元素。

如果要使用更多子属性来执行“父组件”中的操作,则它很有用。

服务-From the Docs

  

服务是在彼此不认识的类之间共享信息的好方法。

如文档中所述,这些类在您希望跨多个组件共享数据并且无需在它们之间建立联系时非常有用。

服务可以依赖于其他服务,并且通过使用外部服务,您可以将数据集中到一个负责管理和更新数据的外部对象中。

借助最新的RxJS Libary,您可以借助SubjectBehavior Subject高效地(有限的时间)集中数据。