Визуализация angular компонентов в Handsontable Cells

В моем проекте я пытаюсь отобразить angular компоненты (например, поиск по автозаполнению) в таблице. Из-за требований, которые у меня есть (например, выбор нескольких ячеек с помощью ctrl +click), я решил попробовать его с помощью handstatable.

Я использовал ручной рендерер и добавлял компоненты динамически.

Код выглядит так

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 компонентов.

Материал, который я пробовал:

  1. Ничего не делать

Пробное решение: ничего не делать и оставить все на Angular

Проблема: Angular никогда не вызывает ngOnDestroy CellContainer.

  1. Сохранение componentRefs

Пробное решение: сохранение componentRef в массиве и после определенного количества рендеринга, пытаясь уничтожить компоненты я   оказано некоторое время назад. Подсчет времени, ручные крючки   (verticalScroll/beforeRender/afterRender), в методе рендеринга

Проблема: уничтожение angular компонента всегда выдает ошибку ('не может прочитать свойство' nativeNode 'с нулевым значением), или компоненты получают   отображается совершенно неправильно

  1. Проверьте во время рендеринга, есть ли там элемент

Пробное решение: во время рендеринга: я проверил, есть ли уже компонент, и использовал ли он для переработки уже существующего компонента с добавлением только нового значения.

Проблема: во время прокрутки значения полностью смешиваются.

Ссылка на мое решение (и внедренное решение № 3) доступна на github.

У кого-нибудь есть идеи, как с этим справиться? Если нет, приложение замедляется. непригодный для использования после небольшой прокрутки & используя таблицу.

ОТВЕТЫ