3

I have implemented force:hasRecordId, lightning:isUrlAddressable in my aura component and I have used the below code trying to redirect to a aura component:

navigateToRsEdit() {
    this[NavigationMixin.Navigate]({
        type: "standard__component",
        attributes: {
            "componentName": "c__ReleaseScheduleUpdate"
        },
        state: {
            "recordId": this.recordId
        }
    });
}

The redirection is working but it seems to me that recordId is not passed to the aura component. I have tried recordId, Id, and id but none of them work for me. I am just wondering is it possible to pass that info at all?

4
  • what exactly is not working? this.recordId ? are you attempting tho pass the id before or after navigating? who manages the navigation, the aura or lwc ? – glls Apr 5 '19 at 0:44
  • @glls the navigation is handled in lwc. And the navigation works really fine and passes the parameter without any issue. But the question is what kind of query string - or any other mechanism can I pass the record id to an aura component – Lance Shi Apr 5 '19 at 1:23
  • is the aura component wrapping the lwc? (the lwc is a direct child of the aura cmp?) – glls Apr 5 '19 at 1:24
  • @glls No, completely separate – Lance Shi Apr 5 '19 at 1:26
1

You can use a pubsub emitter/dispatcher pattern. I call this LWC a messageBroker. You can find a working example of LWC and Aura interoperability in my repo here

Basically, to have uni (even bi-directional) data move from LWC to aura, right now the best technique is to place an Aura wrapper somewhere on your flexipage.

With a standardized LWC pub-sub channel messageBroker (or whatever you want), the LWC parts are as follows:

lwcRequestor.js

fireEvent(this.pageRef, 'messageBroker', payload});
// payload.data
// payload.recordId, etc

messageBroker.js

import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class MessageBroker extends LightningElement {
  @wire(CurrentPageReference) pageRef;

  connectedCallback() {
    registerListener('messageBroker', this.messageBrokerEmitter, this);
  }

  disconnectedCallback() {
    unregisterAllListeners(this);
  }

  messageBrokerEmitter(payload) {
    // Just pass this on through to the parent enclosing aura component
    this.dispatchEvent(new CustomEvent('message', { detail: { payload } }));
  }

}

Then the aura component below placed on your flexipage. This is important because of the current limitations of the lwc-recipe pubsub component requires @wire pageRef. (Though you can strip that check out if you want, and swap for say - a recordId).

This aura wrapper is as such:

MessageBrokerAuraHandler.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
  <c:messageBroker onmessage="{! c.handleMessageBroker }"></c:messageBroker>
</aura:component>

Then you're freely able to handle the LWC's payload in your aura component via c.handleMessageBroker.

0

Based on the discussion, no, it is not possible, unless you do create an AURA wrapper component around your LWC. By doing so, you can use a Custom event and dispatch it to the wrapper which in return can fire an application event in order to pass the record ID to another Aura component so you can store it / or use it in yet another aura component.

It would seem just easier to trigger the navigation from your aura component with the record ID for that matter.

Unless you are in a record page, where you can use the recordId attribute

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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