Question

在我的项目中，我尝试在表格中显示角度组件（如自动完成下拉搜索）。由于我的要求（比如用 ctrl +点击多次选择不同的单元格），我决定给它一个双手动画。

我已使用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），在render-method

问题：对角度组件的破坏总是会引发错误（＆＃39;无法读取属性＆＃39; nativeNode＆＃39; of null＆＃39;）或组件获取显示完全错误

在渲染期间检查元素是否存在

尝试过的解决方案：在渲染过程中：我检查了是否已经有了一个组件，如果是，我曾用于回收已经存在的组件并仅添加新值。

问题：滚动期间值完全混淆。

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

你们中的任何人都知道如何以干净的方式处理这个问题？如果不是，应用程序变得缓慢＆amp;在稍微滚动之后无法使用使用表格。

提前感谢任何提示＆amp;建议。

Answer 1

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

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

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

});

Answer 2

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

changeDetection: ChangeDetectionStrategy.OnPush

在动手单元格中渲染角度分量

2 个答案: