Question

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

<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组件中，并重新启动产品列表。

任何帮助将不胜感激。

Answer 1

在这种情况下，我认为使用公共父组件会更好，并使product-list成为一个接收列表并仅显示它的哑组件。这样父母负责管理这个列表，product-list负责渲染列表。这允许您处理来自父组件的状态，因为new-product也是愚蠢的，它将向父组件发送更改并将新列表状态传播给子组（aka 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>，因为它的内部节点将由其在组件定义上的模板定义。

angularjs 1.5.x中的子组件通信

1 个答案: