핸즈터블 셀에서 각도 구성 요소 렌더링

핸즈터블 셀에서 각도 구성 요소 렌더링

제 프로젝트에서는 각도 구성 요소(자동 완성 드롭다운 검색 등)를 테이블에 표시하려고 합니다.(+클릭으로 다른 셀을 여러 개 선택하는 것과 같은) 요건이 있기 때문에 핸즈톱으로 시도해 보기로 했습니다.

핸디터블 렌다러를 사용하여 컴포넌트를 동적으로 추가했습니다.

코드는 다음과 같습니다.

매트릭스.컴포넌트.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는 Cell Container의 ngOnDestroy를 호출하지 않습니다.

2. componentRefs 저장 중

해결 방법: componentRef를 어레이에 저장하고 얼마 전에 렌더링한 컴포넌트를 파기하려고 합니다.시간에 따른 카운트, 렌더 방식에서 핸즈톤 가능한 후크(verticalScroll/beforeRender/afterRender)

문제:각도 구성 요소를 파괴하면 항상 오류('null 속성'nativeNode'를 읽을 수 없음)가 발생하거나 구성 요소가 완전히 잘못 표시됩니다.

3. 렌더링 중에 요소가 있는지 확인합니다.

테스트한 솔루션:렌더링 중:컴포넌트가 이미 존재하는지, 이미 존재했던 컴포넌트를 재활용하기 위해 새로운 값만 추가했는지 확인했습니다.

문제:스크롤 중에 값이 완전히 뒤섞입니다.

솔루션(및 구현된 솔루션 #3)에 대한 링크는 github에서 이용할 수 있습니다.

이 문제를 어떻게 깔끔하게 처리할지 아는 사람 있나요?그렇지 않으면 스크롤을 조금 하고 테이블을 사용하면 응용 프로그램이 느려지고 사용할 수 없게 됩니다.https://handsontable.com/docs/8.2.0/tutorial-cell-function.html 를 참조해 주세요.

셀 렌더러 사용.열을 구성할 때 선택한 렌더러 이름을 사용합니다.

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

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

});

다음과 같이 changeDetection을 시도하여 컴포넌트를 강제로 변경해야 할 수 있습니다.

changeDetection: ChangeDetectionStrategy.OnPush

언급URL : https://stackoverflow.com/questions/49295984/rendering-angular-components-in-handsontable-cells