3

I am using lightning navigation to pass recordId from the parent component to the child component.

On button click, I am navigating to child component like below URL -

https://XXXXXXXXXX.lightning.force.com/lightning/cmp/c__ChildComp?c__recordId=t2B9E000123JvDJUA0

I need to get the recordId from the URL in the child component and pass it to apex methods.

I tried the below, but did not get the recordId.

  import { LightningElement, api, track, wire } from "lwc";
    import { getRecord, generateRecordInputForUpdate } from "lightning/uiRecordApi";
    import { CurrentPageReference } from "lightning/navigation";
    
    export default class TestLWC extends LightningElement {
     @track getrecordId;
      @wire(CurrentPageReference)
      currentPageReference;
     setCurrentPageReference(currentPageReference) {
    this.currentPageReference = currentPageReference;
  }
      getrecordId =
        this.currentPageReference && this.currentPageReference.state.c__recordId
    
    @wire(getData, { getrecordId: "$getrecordId" })
    
    }
4
  • Looking at the docs, seems you will need to inject the current page reference using a setter function. Can you try that out?
    – Jayant Das
    Jun 4, 2019 at 19:45
  • like this i need to set? set setrecordId(){ this.currentPageReference && this.currentPageReference.state.c__recordId; } Jun 4, 2019 at 19:49
  • Like this setCurrentPageReference(currentPageReference) {this.currentPageReference = currentPageReference; .....}
    – Jayant Das
    Jun 4, 2019 at 19:52
  • I have written the code as above. Still i am not getting the value.. have i written it wrongly? Jun 4, 2019 at 19:59

2 Answers 2

4

You can get recordId based on below code using CurrentPageReference object. This will return record id from parent object.

You can get recordId based on below code.  

import { CurrentPageReference } from 'lightning/navigation';
import { LightningElement ,wire,track} from 'lwc';
export default class TestLWC {

    @track recordId='';
     @wire(CurrentPageReference)
    currentPageReference; 

    get recordIdFromState(){
        return this.currentPageReference &&
            this.currentPageReference.state.c__recordId; 
    }
    renderedCallback()
    {
      if(this.recordId==='')
      {
          this.recordId=this.recordIdFromState;
          console.log(this.recordId);
          //call apex after this.recordId has value
      }
    }
}
4
  • Hi Dhanik.. I am using @wire service to call apex..@wire(getData, { parentId: "$recordId" }) Datadetails;.. can i use directly this.recordId instead of "$recordId" Jun 4, 2019 at 20:46
  • Yes. We can. Parameter with $ to indicate that it’s dynamic and reactive. It references a property of the component instance. If its value changes, the template rerenders. Jun 4, 2019 at 20:55
  • Hi Dhanik.. thanks for the help. i got the recordId . One doubt. can we use setter for setting the recordId from currentPageReference ? instead of renderedCallback() Jun 4, 2019 at 21:11
  • Yes. Try with this. async connectedCallback() { this.recordId = this.currentPageReference.state.c__recordId;} Jun 4, 2019 at 22:27
1

The best way to get parameters from URL is use CurrentPageReference.

currentPageReference.state allows you to get params.

Example:


    import { LightningElement, wire } from 'lwc';
    import { CurrentPageReference } from 'lightning/navigation';
    
    export default class Test extends LightningElement {
    
        recordId = null;

        @wire(CurrentPageReference)
        getStateParameters(currentPageReference) {
           if (currentPageReference) {
              this.urlStateParameters = currentPageReference?.state?.c__recordId;
           }
        }
    }

More details you can find here https://beyondthecloud.dev/blog/get-url-parameters-in-lwc

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .