부모 구성 요소 컨트롤러에서 자식 구성 요소 컨트롤러 함수 / 도우미를 호출하는 방법

부모 측에서 이벤트가 발생할 때마다 부모 컨트롤러에서 자식 컨트롤러 함수를 호출해야합니다. .

예를 들어

ABC는 부모 구성 요소이고 DCE는 자식 구성 요소이며,이 자식 구성 요소에는 Span of Text 태그와 X 기호가 있습니다. x를 클릭하면 자식 컨트롤러를 사용하여 값이 지워집니다. ABC 상위 구성 요소에는 Form 요소가 있고 하위 구성 요소는 양식 중 하나입니다.

내 요구 사항은 상위 구성 요소 버튼을 클릭 할 때이 하위 구성 요소 값을 지우는 것입니다.

여기는 여기에 실제 코드를 게시 할 수 없기 때문에 시도하고있는 샘플 코드 아래

ParentComponent.cmp

 <aura:registerEvent name="clrValues" type="c:ClearValues"/> <div> <c:ChildComponent textValue="test"/> <ui:button label="Save"/> <ui:button label="Clear" press="{!c.clear}"/> </div> </aura:component> 

ParentController.js

({ clear : function(component, event, helper) { var evtFire = component.getEvent("clrValues"); evtFire.fire(); } }) 

ClearValues.evt

<aura:event type="APPLICATION" description="Event template" /> 

ChildComponent.cmp

<aura:component > <aura:handler name="setValues" event="c:ClearValues" action="{!c.clear}"/> <aura:attribute name="textValue" type="String" default="test"/> <div > <ui:inputText label="Expense Name" value="{!v.textValue}" aura:id="input1"/> </div> </aura:component> 

ChildController.js

({ clear : function(component, event, helper) { helper.clearValues(component,event); } }) 

댓글

  • 코드를 제공하지 않으면 도움이되지 않습니다.
  • Mohit, 코드를 추가했습니다. 원래 코드를 게시 할 수 없습니다.하지만 내가 달성하려는 샘플을 제공했습니다.

Answer

하위 구성 요소의 핸들러 이름은 상위 구성 요소에 등록 된 이름과 일치해야합니다. 즉, 하위 구성 요소의 핸들러는 다음과 같아야합니다.

 <aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/> 

-UPDATE-

부모와 자녀 간의 의사 소통을위한 더 나은 접근 방식은 iv id에 나열된 <aura:method>를 사용하는 것입니다. = “0911ccb3bc”>

lightning 문서 및 여기

이 작업을 수행하려면 다음 위치에 메소드를 정의해야합니다. 다음과 같은 하위 구성 요소 :

 <aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC"> 

그러면 다음과 같이 상위 구성 요소 내부에서 참조 할 때 ID가 있어야합니다.

 <c:ChildComponent textValue="test" aura:id="cComp"/> 

그런 다음 상위 구성 요소의 clear 메소드에서 다음과 같은 하위 메소드를 호출해야합니다.

 var childCmp = component.find("cComp") childCmp.sampleMethod(); 

댓글

  • 응용 프로그램 이벤트가 아닌 구성 요소 수준 이벤트에만 적용됩니다.
  • hmm that '는 사실입니다. '이 이벤트가 애플리케이션 이벤트임을 알지 못했습니다. @Raj_SFDC, 왜 ' 이벤트를 구성 요소 이벤트로 만들 수 없습니까?

답변

애플리케이션 이벤트 핸들러에는 name 속성이 eventaction 속성은 여기 에서 언급 한대로 충분합니다.

다음은 clear 메소드에서 애플리케이션 이벤트가 시작되는 방법입니다.

({ clear : function(component, event, helper) { $A.get("e.c:clrValues").fire(); } }) 

자세한 내용은 문서 의 애플리케이션 이벤트 섹션을 참조하세요.

댓글

  • 행운도 없습니다. 제 가정은 부모로부터 자식 이벤트를 처리 할 수 없다는 것입니다. 확인 해주세요
  • @Raj_SFDC 우리는 부모로부터 자녀에게 신청 이벤트를 발생시킬 수 있습니다. 그렇게 말하면, 당신이 잘못하고 있습니다. 내 답변을 업데이트했습니다. 좀 봐주세요.
  • 위에서 한 가지 질문이 있습니다 [$ A.get (" ec : clrValues ")], 속성 값을 얻는 방법.
  • 이벤트 매개 변수를 참조하고 있습니까? $A.get("e.c:clrValues").setParams({'message':'test'})를 사용하여 설정하고 이벤트를 실행할 수 있다면 핸들러 메서드에서 값을 다시 가져옵니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다