在Angular中,单元格渲染器在初始化时确实不会获得ICellRendererParams参数。但是,您可以通过在单元格渲染器组件中使用Input装饰器来传递参数。
以下是一个示例,演示了如何在Angular中解决这个问题:
CustomCellRendererComponent
的新组件,并在其中定义所需的单元格渲染逻辑:import { Component, Input } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-custom-cell-renderer',
template: `
{{ value }}
`,
})
export class CustomCellRendererComponent implements ICellRendererAngularComp {
@Input() value: any;
agInit(params: any): void {
// 在这里可以初始化一些其他逻辑
// params 参数可以通过绑定到组件的属性中传递
this.value = params.value;
}
refresh(params: any): boolean {
// 刷新单元格内容
this.value = params.value;
return true;
}
}
CustomCellRendererComponent
添加到entryComponents
数组中,并在列定义的cellRendererFramework
中使用该组件:import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
rowData = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 },
];
columnDefs = [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age', cellRendererFramework: CustomCellRendererComponent },
];
frameworkComponents = {
customCellRenderer: CustomCellRendererComponent,
};
}
在上面的示例中,我们将CustomCellRendererComponent
添加到entryComponents
数组中,并命名为customCellRenderer
。然后,在列定义的cellRendererFramework
中使用customCellRenderer
来指定要使用的单元格渲染器组件。
现在,CustomCellRendererComponent
可以通过@Input()
装饰器获取值,并在渲染单元格时使用它。当单元格的值发生变化时,可以通过refresh
方法来更新单元格内容。
请注意,示例中使用了ag-Grid的Angular适配器。如果您使用的是其他表格库或纯Angular,请根据您的情况进行相应的调整。