在Handsontable Cells中渲染Angular组件

在我的一个项目中，我尝试在表格中显示Angular组件(就像自动完成下拉搜索一样)。由于我的要求(如多选择不同的单元格与ctrl+点击)，我决定给它一个handsontable。

我使用了handsontable渲染器和动态添加组件。

代码看起来像这样

matrix.component.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;
}

我目前的问题是渲染的角组件的生命周期。

我尝试过的东西:

1. 什么都不做

试着解决方案:什么都不做，把一切都留给Angular

问题: Angular从不调用CellContainer的ngOnDestroy函数。

2. 储蓄componentRefs

试着解决方案:在数组中保存componentRef，并在一定的渲染之后试图销毁组件I 一段时间前渲染。通过时间计数，手握钩子 (verticalScroll/beforeRender/afterRender)，在render-method

问题: angular组件的销毁总是抛出一个错误('无法读取null'的属性' nativenode ')或组件get 显示完全错误

3. 在呈现过程中检查是否有元素存在

试着解决方案:在渲染过程中:我检查了是否已经有一个组件，以及是否仅通过添加新值来回收已经存在的组件。

问题:值在滚动过程中完全混淆。

我的解决方案(和一个实现的解决方案#3)的链接在github上可用。