angularjs에서 하위 구성 요소 통신 1.5.x

2 개의 하위 구성 요소가있는 angularjs 구성 요소가 있습니다. new-product 구성 요소에 on-added 출력이 트리거 될 때 product-list 구성 요소에서 함수를 호출하려고합니다.angularjs에서 하위 구성 요소 통신 1.5.x

<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 성분이고 제품 목록을 다시 시작.

도움이 될 것입니다.

출처

2017-02-02 Mike Anderson

이 두 구성 요소의 부모 구성 요소에는 호출 할 함수가 있어야한다고 생각합니다. 이 기능은 무엇입니까? –

product-list 구성 요소는 store-id 입력을 가져 와서 상점의 제품 목록을 가져옵니다. 부모 구성 요소에 함수를 추가 할 때 전화가 왔지만 신제품 구성 요소에서 제품을 추가 할 때 누가 목록을 다시로드합니까? –

제품 목록은 상위 구성 요소에서 제품 목록을 가져와야하며 상위 구성 요소는이 목록에 새 제품을 추가해야한다고 생각합니다. 그러면 문제가 사라집니다. –

이 경우에는 공통 상위 구성 요소를 사용하는 것이 더 좋을 것이며 product-list은 목록을 수신하고 표시하는 멍청한 구성 요소가됩니다. 부모님이이 목록을 관리해 주시고 product-list이 목록을 렌더링하는 데주의를 기울이십시오. 이렇게하면 부모 구성 요소에서 상태를 처리 할 수 있습니다. new-product도 바보이기 때문에 부모에 대한 변경 사항을 방출하고 새 목록 상태를 자식 (a.k.a. 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>을 가질 것입니다. 내부 노드가 구성 요소 정의에 대한 템플릿에 의해 정의되기 때문입니다.

출처

2017-02-02 10:35:23

솔루션에 감사드립니다. @ Lenilson-de-castro 그러나 나는 자식과 자식 간의 의사 소통에 대한 메커니즘을 찾고있다. –

@MikeAnderson 대답은 실제로 시나리오에 대한 해결책입니다. 그러나 형제 자매로 지내고 어떻게 든 상대방과 이야기를 나누려면 이벤트를 사용할 수 있습니다. 예를 들면 :'new-product'에'$ rootScope. $ broadcast ('productListUpdated')'와'product-list'에 : $ scope. $ on ('productListUpdated', this.reloadProductList)입니다. 나는 이것이 도움이 될 것이라고 생각한다. –

angularjs에서 하위 구성 요소 통신 1.5.x

답변

관련 문제