angularjsでの子コンポーネントの通信1.5.x

Question

2つの子コンポーネントを持つangularjsコンポーネントがあります。 new-productコンポーネントのon-added出力トリガのときに、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コンポーネントであり、製品リストを再開始します。

ご協力いただければ幸いです。

Answer 1

この場合、共通の親コンポーネントを使用して、product-listをリストを受信して​​表示するダムコンポーネントにする方が良いと思います。親がこのリストを管理するように、product-listはリストのレンダリングを担当します。これにより、親コンポーネントからステートを処理することができます。new-productもダムであるため、親に変更が加えられ、新しいリストステートが子（a.k.a. product-list）に伝播されます。

例えば、このコンポーネントの生の木に似た何かを使用することを検討してください：前の例には、生のコンポーネントツリーの表現とそのテンプレートです

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

：

<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"></products-page>があるでしょう。なぜなら内部ノードはコンポーネント定義のテンプレートによって定義されるからです。