在 Handsontable Cells 中渲染 Angular 組件 - Rendering Angular components in Handsontable Cells

問題：

In a project of mine, I try to display Angular Components (like an Autocomplete Dropdown Search) in a table.在我的一個項目中，我嘗試在表格中顯示 Angular 組件（如自動完成下拉搜索）。 Because of the requirements I have (like multi-selecting different cells with ctrl +click) I decided to give it a go with handsontable.由於我的要求（例如使用ctrl + click 多選不同的單元格），我決定嘗試使用 handsontable。

I've used the handsontable renderer and add the components dynamically .我使用了handsontable 渲染器並動態添加了組件。

The code looks like this代碼看起來像這樣

matrix.component.ts矩陣.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;
}

What's my current issue is the lifecycle of the rendered angular components.我當前的問題是呈現的角度組件的生命週期。

Stuff I tried:我試過的東西：

1. Do nothing沒做什麼

Tried Solution : Doing nothing and leaving everything to Angular嘗試過的解決方案：什麼都不做，把一切都留給 Angular

Problem : Angular never calling the ngOnDestroy of the CellContainer.問題：Angular 從不調用 CellContainer 的 ngOnDestroy。

1. Saving componentRefs保存組件引用

Tried Solution : Saving the componentRef in an Array and after a certain amount of rendering trying to destroy the components I rendered some time ago.嘗試過的解決方案：將 componentRef 保存在一個數組中，並在經過一定量的渲染後試圖破壞我前段時間渲染的組件。 Counting via time, handsontable hooks (verticalScroll/beforeRender/afterRender), in the render-method在渲染方法中通過時間、handsontable 鉤子 (verticalScroll/beforeRender/afterRender) 進行計數

Problem : Destroy of the angular component always throws an error ('cannot read property'nativeNode' of null') or the components get displayed completely wrong問題：角度組件的銷燬總是引發錯誤（'cannot read property'nativeNode' of null'）或組件顯示完全錯誤

1. Check during rendering if an element is there在渲染期間檢查元素是否存在

Tried Solution : During the render: I checked if there's already a component and if it was I used to recycle the already-there component by adding a new value only.嘗試過的解決方案：在渲染過程中：我檢查了是否已經有一個組件，以及我是否曾經通過僅添加新值來回收已經存在的組件。

Problem : The values get completely mixed up during scrolling.問題：滾動期間值完全混淆。

A link to my solution (and an implemented solution #3) is available ongithub . github上提供了指向我的解決方案（以及已實施的解決方案 #3）的鏈接。

Does anyone have an idea of how to handle this in a clean way?有沒有人知道如何以乾淨的方式處理這個問題？ If not the application gets slow & unusable after a little bit of scrolling & using the table.如果不是，在稍微滾動和使用表格後，應用程序變得緩慢且無法使用。 Better refer :https://handsontable.com/docs/8.2.0/tutorial-cell-function.html最好參考：https ://handsontable.com/docs/8.2.0/tutorial-cell-function.html

---

解決方案：

參考一： https://en.stackoom.com/question/3Kq8W
參考二： https://stackoom.com/question/3Kq8W