在 Handsontable Cells 中渲染 Angular 组件答案

【问题标题】：Rendering Angular components in Handsontable Cells在 Handsontable Cells 中渲染 Angular 组件
【发布时间】：2018-08-24 01:25:26
【问题描述】：

在我的一个项目中，我尝试在表格中显示 Angular 组件（如自动完成下拉搜索）。由于我的要求（例如使用 ctrl+click 多选不同的单元格），我决定尝试一下 handsontable。

我用过handsontable renderer 和add the components dynamically。

代码如下所示

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;
}

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

我尝试过的东西：

什么都不做

尝试过的解决方案：什么都不做，把一切都交给 Angular

问题：Angular 从不调用 CellContainer 的 ngOnDestroy。

保存componentRefs

尝试过的解决方案：将 componentRef 保存在一个数组中，并在经过一定量的渲染后尝试销毁我的组件前段时间渲染的。通过时间计数，可动手操作的钩子 (verticalScroll/beforeRender/afterRender)，在渲染方法中

问题：销毁 angular 组件总是抛出错误（'cannot read property'nativeNode' of null'）或组件得到显示完全错误

在渲染过程中检查元素是否存在

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

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

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

有没有人知道如何以干净的方式处理这个问题？如果不是，应用程序会在滚动和使用表格后变得缓慢且无法使用。最好参考：https://handsontable.com/docs/8.2.0/tutorial-cell-function.html

【问题讨论】：

我决定使用 ag-grid 社区版而不是 handsontable。渲染单元格的生命周期在那里很容易处理。我还检查了 ngx-datatable，但它目前不支持固定列，这是项目的要求之一。
这个答案有用吗？ stackoverflow.com/a/44942210/2678218
我尝试集成时出现 CSS 问题，此问题已通过我的常用 CSS 中的此导入修复
你能修复指向 repo 的链接吗？
嗯，handsontable npmjs.com/package/@handsontable/angular 存在角度积分，您尝试使用它吗？

标签： angular typescript dom dynamic handsontable

【解决方案1】：

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

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

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

});

【讨论】：

【解决方案2】：

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

changeDetection: ChangeDetectionStrategy.OnPush

【讨论】：