Javascript 使用Js图表在lightning web组件中将数据从父级传递到子级
我最近在Lightning web组件中使用图表JS时遇到了一个问题。我想分享我为那些遇到问题的人找到的解决方案Javascript 使用Js图表在lightning web组件中将数据从父级传递到子级,javascript,salesforce,salesforce-lightning,Javascript,Salesforce,Salesforce Lightning,我最近在Lightning web组件中使用图表JS时遇到了一个问题。我想分享我为那些遇到问题的人找到的解决方案 如何在父组件上更新子组件中的数据更改时手动处理这些更改。这将适用于所有情况,但我正在尝试更新他们显示的图表示例。这是我提出的解决方案 父控制器具有以下嵌套函数 @wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS }) wireContact({ error, data }) { if (data)
如何在父组件上更新子组件中的数据更改时手动处理这些更改。这将适用于所有情况,但我正在尝试更新他们显示的图表示例。这是我提出的解决方案 父控制器具有以下嵌套函数
@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
if (data) {
console.log('getRecord Data', JSON.stringify(data))
this.contact = data;
getAllDateRecords({ contactId: this.recordId })
.then(result => {
this.allDateRecords = result;
this.chartReady = true;
})
.catch(err => console.log(JSON.stringify(err)));
} else if (error) {
console.error('error', error)
this.contact = undefined;
}
}
父组件具有c-debt-chart组件及其从所有日期记录接收的数据:
<template>
<div class="slds-page-header__row slds-accordion__content">
<div class="c-container w-100">
<lightning-layout horizontal-align="space">
<lightning-layout-item padding="around-small">
<template if:true={chartReady}>
<c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
</template>
</lightning-layout-item>
</lightning-layout>
</div>
</div>
<template>
当您的逻辑仅依赖于一个api属性时,上述解决方案才起作用
@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
if (data) {
console.log('getRecord Data', JSON.stringify(data))
this.contact = data;
getAllDateRecords({ contactId: this.recordId })
.then(result => {
this.allDateRecords = result;
this.chartReady = true;
})
.catch(err => console.log(JSON.stringify(err)));
} else if (error) {
console.error('error', error)
this.contact = undefined;
}
}
如果您有多个可以同时更改的api属性,这些属性也应该在决策过程中一起使用,那么您可能需要使用renderedCallback()来执行逻辑
@api
get prop1() {
return this._prop1;
}
set prop1(value) {
this._prop1= value;
this.somelogic(); //needs to be called in every dependent set prop
}
@api
get prop2() {
return this._prop2;
}
set prop2(value) {
this._prop2= value;
this.somelogic(); //needs to be called in every dependent set prop
}
somelogic(){
this.showsomething = this._prop1 && this._prop2; //dependent logic
}
在每个setter中调用somelogin也可能导致在设置属性期间出现突然的UI行为
相反
renderedCallback(){
this.somelogic(); //can even execute code conditionally
}
如果未触发呈现回调,请使用模板中的api属性强制呈现,if:true有助于实现故障保护代码
<template if:true={_prop1}>
<template if:true={_prop2}>
<!--place dependant html here-->
<template>
<template>
<template if:true={_prop1}>
<template if:true={_prop2}>
<!--place dependant html here-->
<template>
<template>