在可手持单元中渲染角度组件

Question

在我的一个项目中，我尝试在表格中显示Angular Components（例如自动完成下拉搜索）。由于我的要求（例如使用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从不调用CellContainer的Ngondestory。

尝试过的解决方案：将组件Ref保存在数组中，并在一定数量的渲染后尝试销毁我前一段时间渲染的组件。通过时间计数，渲染方法中的手动挂钩（垂直滚动/beforeRender/postRender）

问题：角度组件的销毁总是会引发错误（“无法读取null的属性‘nativeNode’”），或者组件显示完全错误

尝试的解决方案：在渲染期间：我检查是否已经有组件，以及是否仅通过添加新值来回收已经存在的组件。

问题：这些值在滚动过程中完全混淆。

github上提供了指向我的解决方案（以及已实施的解决方案#3）的链接。

有人知道如何以干净的方式处理这个问题吗？如果没有，应用程序就会变慢

Answer 1

可能您需要尝试更改检测，如下所示，强制对您的组件进行新更改。

changeDetection: ChangeDetectionStrategy.OnPush

Answer 2

使用单元渲染器。配置列时使用您选择的渲染器名称：

const container = document.getElementById('container');

const hot = new Handsontable(container,
 {
  data: someData,
  columns: 
[{
    renderer: 'numeric'
  }]

});