在handsontable单元格中渲染角度组件

Question

在我的一个项目中,我尝试在表格中显示Angular Components(如自动完成下拉搜索).由于我的要求(比如用ctrl+点击多选不同的单元格),我决定给它一个动手的去.

我使用了handontable渲染器并动态添加组件.

代码看起来像这样

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保存在一个数组中,并在一定量的渲染后试图销毁我前一段时间渲染的组件.在渲染方法中通过时间计数,交互式挂钩(verticalScroll/beforeRender/afterRender)

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

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

尝试的解决方案:在渲染期间:我检查是否已经有一个组件,如果它是我用于回收已经组件而只添加新值.

问题:滚动期间值完全混淆.

github上提供了我的解决方案的链接(以及实施的解决方案#3).

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

非常感谢您提供任何提示和建议.

Answer 1

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

changeDetection: ChangeDetectionStrategy.OnPush