在我的一个项目中,我尝试在表格中显示 Angular 组件(如自动完成下拉搜索)。由于我的要求(例如使用 ctrl+click 多选不同的单元格),我决定尝试一下 handsontable。
我用过 handsontable renderer 和 add the components dynamically。
代码看起来像这样
矩阵组件.ts
this.hot = new Handsontable(this.handsontable.nativeElement, {
data: this.tableData,
colWidths: [80, 300],
colHeaders: ['Id', 'Custom Component'],
columns: [
{
data: 'id',
},
{
data: 'id',
renderer: (instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) => {
if (cellProperties.hasOwnProperty('ref')) {
(cellProperties.ref as ComponentRef<CellContainerComponent>).instance.value = row;
} else {
cellProperties.ref = this.loadComponentAtDom(
CellContainerComponent,
td,
((component: any) => {
component.template = this.button4Matrix;
component.value = row;
}));
}
return td;
},
readOnly: true,
},
],
});
private loadComponentAtDom<T>(component: Type<T>, dom: Element, onInit?: (component: T) => void): ComponentRef<T> {
let componentRef;
try {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
componentRef = componentFactory.create(this.injector, [], dom);
onInit ? onInit(componentRef.instance) : console.log('no init');
this.appRef.attachView(componentRef.hostView);
} catch (e) {
console.error('Unable to load component', component, 'at', dom);
throw e;
}
return componentRef;
}
我当前的问题是渲染的角度组件的生命周期。
我试过的东西:
没做什么
尝试过的解决方案:什么都不做,把一切都留给 Angular
问题:Angular 从不调用 CellContainer 的 ngOnDestroy。
保存组件引用
尝试过的解决方案:将 componentRef 保存在一个数组中,并在经过一定量的渲染后尝试销毁我前段时间渲染的组件。在渲染方法中通过时间计数,可动手操作的钩子(verticalScroll/beforeRender/afterRender)
问题:销毁 angular 组件总是抛出错误('cannot read property'nativeNode' of null')或组件显示完全错误
在渲染期间检查元素是否存在
尝试过的解决方案:在渲染期间:我检查了是否已经有一个组件,如果它是我曾经通过仅添加一个新值来回收已经存在的组件。
问题:在滚动过程中,这些值完全混淆了。
github 上提供了指向我的解决方案(以及已实施的解决方案 #3)的链接。
有谁知道如何以干净的方式处理这个问题?如果不是,应用程序会变慢 &稍微滚动后无法使用 &使用表。更好的参考:https://handsontable.com/docs/8.2.0/tutorial-cell-function.html
使用单元格渲染器。配置列时使用您选择的渲染器名称:
const container = document.getElementById('container');
const hot = new Handsontable(container,
{
data: someData,
columns:
[{
renderer: 'numeric'
}]
});
可能您需要尝试如下更改检测,强制对组件进行新更改。
changeDetection: ChangeDetectionStrategy.OnPush
不定期副业成功案例分享