I have the below parent aura component which has parent LWC –
On clicking redirect button on parent i am passing the attritubes in URL and the values are displayed on the child. This happens for first time. But when i go 2nd time and hit redirect button, i am unable to see updated values on child. it gives me previous values.
If i refresh the entire browser and then do the action, it works fine.
Parent Aura (Used as quickaction) -
<aura:component implements="lightning:isUrlAddressable,force:lightningQuickAction,force:hasRecordId">
<div class="slds-card">
<c:sidParentChild recordId="{!v.recordId}"/>
</div>
</aura:component>
Parent LWC HTML –
<template>
<lightning-layout multiple-rows="true">
<lightning-layout-item padding="horizontal-small" size="6">
<lightning-input type="text" value={employeename} name="Ename" label="E Name" class="ename"></lightning-input>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-small" size="6">
<lightning-input type="text" value={employeeadd} name="Eadd" label="E Add" class="eadd"></lightning-input>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-small" class="slds-p-top_large" size="6">
<lightning-button label="RedirectToChild" title="RedirectToChild" class="slds-m-left_x-small" onclick={redirecttochild}></lightning-button>
</lightning-layout-item>
</lightning-layout>
</template>
Parent LWC JS –
import { LightningElement, track, api, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from "lightning/navigation";
export default class SidParentChild extends NavigationMixin(
LightningElement
) {
@api recordId;
@track getempdetails = {
employeename: "",
employeeadd: ""
};
connectedCallback() {
this.redirecttochildcomp = {
type: "standard__component",
attributes: {
componentName: "c__sidchildcheck"
},
state: {
c__recordId: this.recordId,
c__getempdetails: this.getempdetails
}
};
this[NavigationMixin.GenerateUrl](this.redirecttochildcomp).then(
url => (this.url = url)
);
}
redirecttochild() {
let ename = this.template.querySelector(".ename").value;
let eaddre = this.template.querySelector(".eadd").value;
this.getempdetails.employeename = ename;
this.getempdetails.employeeadd = eaddre;
this[NavigationMixin.Navigate](this.redirecttochildcomp, false);
}
}
Child Aura Component –
<aura:component implements="lightning:isUrlAddressable,force:lightningQuickAction,force:hasRecordId">
<c:sidchild recordId="{!v.recordId}"/>
</aura:component>
Child LWC HTML –
<template>
{recordid}
{empdetails.employeename}
{empdetails.employeeadd}
</template>
Child LWC JS
import { LightningElement, track, api, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from "lightning/navigation";
export default class Sidchild extends NavigationMixin(
LightningElement
) {
@track recordId;
@track empdetails;
@wire(CurrentPageReference)
currentPageReference;
get recordIdFromState() {
return (
this.currentPageReference && this.currentPageReference.state.c__recordId
);
}
get empdetailsFromState() {
return (
this.currentPageReference &&
this.currentPageReference.state.c__getempdetails
);
}
renderedCallback() {
this.recordId = this.recordIdFromState;
this.empdetails = this.empdetailsFromState;
console.log(this.recordId);
}
}-
Best Answer
Found one solution -
In the component with lightning:isUrlAddressable simply add a change handler for the pageReference state.
Component:
Controller.js: