angularjs 1.5.x 中的子组件通信答案

【问题标题】：child components communications in angularjs 1.5.xangularjs 1.5.x 中的子组件通信
【发布时间】：2017-02-02 09:51:54
【问题描述】：

我有一个带有 2 个子组件的 angularjs 组件。当on-added 输出在new-product 组件中触发时，我想在product-list 组件中调用一个函数。

<h1>{{vm.store.title}}</h1>
<product-list store-id="vm.storeId"></product-list>
<new-product store-id="vm.store.id" on-added="$ctrl.productAdded()"></new-product>

productAdded 方法在product-list 组件中并重新启动产品列表。

我们将不胜感激。

【问题讨论】：

我认为这两个的父组件应该包含你想要调用的函数。这个函数应该做什么？
product-list 组件通过获取 store-id 输入来获取商店的产品列表。当我在父组件中添加该函数时，它调用但从新产品组件添加产品时我重新加载列表的人是谁？
我认为 product-list 应该从父组件获取产品列表，并且父组件应该将新产品附加到这个列表中。然后你的问题就消失了。
您可以只拥有一个产品列表组件，该组件将负责显示带有自定义模板的产品（如果有），并让父组件/控制器处理列表操作（添加、删除、更新产品列表）。
这种方法称为单向数据流。您将事件冒泡，然后数据通过组件树向下传递。

标签： angularjs angularjs-components

【解决方案1】：

在这种情况下，我认为使用公共父组件会更好，并使product-list 成为接收列表并仅显示它的哑组件。这样父级负责管理此列表，product-list 负责呈现列表。这允许您处理来自父组件的状态，因为new-product 也是愚蠢的，它会将更改发送给父组件并将新的列表状态传播给子组件（又名product-list）。

例如，考虑使用类似于这个原始组件树的东西：

<product-manager store-id="$ctrl.storeId">
    <h1>{{vm.store.title}}</h1>
    <product-list products="vm.store.products"></product-list>
    <new-product on-added="vm.productAdded(product)"></new-product>
</product-manager>

或许：

<products-page store="$ctrl.store">
    <h1>{{ $ctrl.store.title }}</h1>
    <product-list products="$ctrl.store.products"></product-list>
    <product-form on-save="$ctrl.productAdded(product)"></product-form>
</products-page>

前面的示例是组件树及其模板的原始表示，在实际情况下您将拥有<products-page store="$ctrl.store"></products-page>，因为它的内部节点将由组件定义上的模板定义。

【讨论】：

感谢@Lenilson-de-castro 的解决方案。但我正在寻找一种机制来实现子组件之间的通信。
@MikeAnderson 答案实际上是您的方案的解决方案。但是，如果您想将它们保持为兄弟姐妹并以某种方式彼此保持通信，则可以使用事件。例如：$rootScope.$broadcast('productListUpdated') 上的 new-product 和：$scope.$on('productListUpdated', this.reloadProductList) 上的 product-list。我认为这可能会有所帮助。