例如A组件数据更新后,需要B组件做出处理
1.渲染两个组件
const columnDefs: (ColDef | ColGroupDef)[] = [ {
headerName: 'Type',//渲染出的header
field: 'Type',//关联的字段
editable: false,//false为不可编辑
// cellRenderer: TypeCellRender,//渲染自定义组件
cellRendererSelector: function (row) {
return { component: row.value ? TypeCellRender : '' }
},//某中条件下渲染自定义组件
},
{
headerName: 'Value',
field: 'Value',
cellRendererSelector: function (row) {
return { component: row.value ? valueCellRender : '' }
},
editable: false,
cellRendererParams: {
updateFunction: params.updateData,
updateTypeFn: params.updateType
},//将父组件的方法塞入自定义组件,供其使用
cellStyle: { padding: 0 },//修改样式
}]
2.A组件定义监控方法,在需要监控数据更新的地方调用
statusUpdateListener(dataID: string) {
if (this.status === 'Success') {
const event = new CustomEvent(`${dataID}-statusChanged`, {
detail: {
status: 'Success'//可传参数
}
});
document.dispatchEvent(event);
}
}
3.B组件定义接收数据更新的方法,并作出处理
updateListener(dataID: string) {
document.addEventListener(`${dataID}-statusChanged`, (e: any) => {
this.disable = true//处理数据
}, false);
}
agInit(params: ICellRendererParams): void {
this.params = params;
this.updateListener(this.params.data.id)//调用方法
}
statusChanged用来识别,数据监控