在“兄弟”组件之间传递数据

时间:2018-02-16 14:13:54

标签: angularjs data-binding angular-components

你可能想知道兄弟组件的意思,它只是两个具有相同父组件的不同组件。

我正在使用angular.js 5.11

假设我有一个带有child1组件和child2组件的父组件。我的child1组件中有一个变量vm.active,我希望在我的child2视图中使用它(如果你想知道的话,在ng中)。

有什么想法吗?想在两个组件中进行双向绑定吗?你们都觉得怎么样?或者也许考虑他们来自同一个州,可能是一个州政府?如果您有任何问题,请告诉我

3 个答案:

答案 0 :(得分:1)

这是创建服务的完美方案。请记住,控制器具有唯一的实例,但服务会传递一个公共实例。

https://www.w3schools.com/angular/angular_services.asp

答案 1 :(得分:1)

在这种情况下不要使用双向数据绑定,因为您可以以更有效的方式完成相同的操作。双向绑定设置需要框架开销。

一种方法:

将父组件中变量(比如x)的单向绑定设置为两个子项。

当child1对变量进行更新时,传入父可以接收的可观察引用。父级可以相应地设置x的值。现在两个孩子都可以看到更新。

这是另一个:

使用单件服务。将变量保存在相关服务中。使用getters和setter方法检索和更新值。

答案 2 :(得分:0)

最后在第一个组件中使用$scope.$parent.$broadcast,在第二个组件上使用$scope.$on,如果有人想知道:)