Jak wywołać funkcję / pomocnika kontrolera komponentu podrzędnego z kontrolera komponentu nadrzędnego

Mam obowiązek wywoływać funkcję kontrolera podrzędnego z kontrolera nadrzędnego za każdym razem, gdy zdarzenie występuje po stronie nadrzędnej .

na przykład

ABC jest komponentem nadrzędnym, a DCE jest komponentem potomnym, ten komponent potomny ma znacznik Span of Text i symbol X. kiedy klikam x, czyści wartość za pomocą kontrolera podrzędnego. Komponent macierzysty ABC ma element Form, a komponent potomny jest jednym z elementów w formularzu.

Moim wymaganiem jest wyczyszczenie wartości tego komponentu potomnego po kliknięciu przycisku komponentu nadrzędnego.

Tutaj jest poniżej przykładowy kod tego, co próbuję, ponieważ nie mogę tutaj umieścić rzeczywistego kodu

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); } }) 

Komentarze

  • Jeśli nie dostarczysz kodu, trudno ci pomóc.
  • Mohit, dodał kod, którego nie mogę opublikować mojego oryginalnego kodu, ale podałem próbkę, co próbowałem osiągnąć.

Odpowiedź

Nazwa modułu obsługi w komponencie podrzędnym powinna być zgodna z zarejestrowaną nazwą w komponencie nadrzędnym. tj. procedura obsługi w komponencie potomnym powinna wyglądać następująco:

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

–UPDATE –

Myślę, że lepszym podejściem do komunikacji rodzic-dziecko jest użycie <aura:method> zgodnie z opisem w lightning docs i tutaj

Aby to zrobić, należy zdefiniować metodę w komponent potomny w ten sposób:

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

Powinieneś wtedy mieć identyfikator, kiedy odsyłasz go do komponentu nadrzędnego w następujący sposób:

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

Następnie w przejrzystej metodzie komponentu nadrzędnego należy wywołać metodę potomną w następujący sposób:

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

Komentarze

  • Dotyczy tylko zdarzenia na poziomie komponentu, a nie zdarzenia aplikacji.
  • hmm that ' s prawda. Nie ' nie zauważyłem, że jest to zdarzenie aplikacji. @Raj_SFDC, dlaczego ' t możesz ustawić swoje wydarzenie jako zdarzenie składowe?

Odpowiedź

Moduł obsługi zdarzeń aplikacji nie powinien zawierać atrybutu name, tylko event i action jest wystarczający, jak wspomniano tutaj .

Oto jak zdarzenie aplikacji powinno zostać wywołane w Twojej metodzie Clear:

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

Aby uzyskać więcej informacji, zapoznaj się z sekcją dotyczącą zdarzenia aplikacji w dokumencie .

Komentarze

  • Z tym też nie powodzenia, przypuszczam, że nie możemy obsłużyć zdarzenia w dziecku rodzica. proszę potwierdzić
  • @Raj_SFDC możemy odpalić zdarzenie aplikacji od rodzica do dziecka. W związku z tym robisz źle. Zaktualizowałem moją odpowiedź, spójrz na nią.
  • Mam tutaj jedno pytanie z góry [$ A.get (" ec: clrValues ")], jak uzyskać wartość atrybutu.
  • czy odnosisz się do parametrów zdarzenia? jeśli tak, możesz ustawić je za pomocą $A.get("e.c:clrValues").setParams({'message':'test'}) i uruchomić zdarzenie, a następnie w metodzie obsługi możesz użyć $A.get("e.c:clrValues").getParam('message'), aby odzyskać wartość.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *