Визуализация 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 компонентов.

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

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

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

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

Сохранение componentRefs

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

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

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

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

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

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

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

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

Ответы