4

This question already has an answer here:

I have a Lightning Record Page which uses multiple components, some are LWC, some are Aura components. I am trying to figure out a way to make sure they all refresh nicely. For the Aura components, I use the standard $A.get('e.force:refreshView').fire(); For the LWCs, I am using fireEvent(this.pageRef, 'refresh', this.name); imported from the pubsub component, which is available in the LWC recipies found Here

My question is this, how do I add an event listener to the LWC which is listening for an Aura event (specifically force:refreshView) to ensure that LWC logic can be executed when events are dispatched from aura components. I have tried the following:

constructor() {
    super();
    this.addEventListener('force:refreshView', this.handleRefresh.bind(this));
  }
handleRefresh() {
   //do some stuff        
}

and I have also tried this:

 connectedCallback() {
    registerListener('force:refreshView', this.handleRefresh, this);       
}

There has to be a way for a lighting web component to know when an aura event is fired...

Edit: this question is not a duplicate of This Question. The other question is asking about how to call the refresh from a Lightning Web Component, my question is how do we listen for events dispatched from Aura components.

marked as duplicate by Pranay Jaiswal, glls, battery.cord, Raul, Martin Lezer Apr 12 at 9:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3

Yes you can, it requires what I've coined as brokering. It requires an Aura wrapper to handle (i.e. register the event listener) and then deal with brokering it down to an embedded child-LWC which is itself pub-subbed to the LWCs you wish to broker to.

In short, it's complicated, rough, and not ideal. But, if you have a lot of aura components you may need to do it.

I have covered this in a somewhat related (LWC to Aura) answer here but the design pattern is the same for (Aura to LWC) since you just pubsub the other way.

Just to be clear, I am currently doing this in production right now, this is not theoretical:

MessageBrokerAura.cmp

<aura:component implements="flexipage:availableForRecordHomeforce:hasRecordId">
  <aura:handler event="force:refreshView" action="{! c.handleForceRefreshViewForLWC }"/>
  <c:messageBrokerLWC aura:id="messageBroker"></c:messageBrokerLWC>
</aura:component>

MessageBrokerAuraController.js

handleForceRefreshViewForLWC: function(component, event, helper) {
  component.find("messageBroker").forceRefreshInitiated();
},

messageBrokerLWC.js

@api
forceRefreshInitiated() {
  fireEvent(this.pageRef, 'forceRefresh'); // your LWCs pubsub to this channel
}
  • thanks tsalb! this was exactly what I am looking for :) – Mitch Spano Apr 11 at 14:15
  • fireEvent(this.pageRef, 'forceRefresh'); --- what is fireEvent.Is this a inbuilt already defined property or a custom one? – devforce Apr 13 at 16:57
  • 1
    @devforce it's the lwc-recipes repo pubsub mechanism – tsalb Apr 13 at 17:26
  • Thanks @tsalb. I got it now – devforce Apr 13 at 18:35
0

my question is how do we listen for events dispatched from Aura components.

I don't think you can directly do this because of the difference in the Events as in Lightning Aura Components (LAC) vs. (DOM) Events in LWC. You could do it other way round, i.e., fire an event from LWC to a wrapped Aura Component as in this answer.

However, one of the approaches here though is what I think you can utilize is by using aura:if within your component (disclaimer: I haven't tested it out myself, but seems this should work).

The idea is that whenever you fire an event from a LAC, utilize an attribute on the LAC so that you re-render the LWC and pass respective values out there to the LWC. The time you re-render the LWC, the attribute in the LWC then captures the updated values baed on events passed from the LAC and you can then take further action based on it in your LWC.

Something as below, where name is a public attribute within your LWC and that refreshValue is the value that's changed in the LAC.

<aura:component>
    <aura:if isTrue="{!v.showHide}">
        <c:myLWCComponent name="{!v.eventValue}" />
    </aura:if>
</aura:component>

And you set the value of eventValuein the JS Controller of your LAC andshowHidefromtrue-->falseand thentrue` so that you can force the LWC to be re-rendered as well as pass the updated value from LAC.

  • Check out my updated answer. It's possible to provide inter-operability using a brokering system, I put up an example (this is an abstraction of what's running in my spring 19 production). – tsalb Apr 10 at 23:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.