如何在角度Slickgrid中即时渲染自定义角度分量

Question

在有角度的slickgrid中，我使用自定义角度组件以单击操作显示用户信息。 当我滑动slickgrid时，自定义角度分量呈现显示格式器内容时，自定义角度分量渲染会花费一些时间。可以减少自定义角度分量的渲染时间。我的要求是立即渲染自定义角度分量。请提供完善的解决方案

网格选项：

public gridOptions: GridOption = {
    enablePagination : true,
    enableAutoResize: true,
    enableSorting: true,
    enableFiltering: true,
    i18n: this.translateService,
    gridMenu: {
        hideExportExcelCommand: true,
        hideExportCsvCommand: true,
        customItems: [{
            command: "cspfm-excel-export",
            titleKey: "EXPORT_TO_EXCEL",
            iconCssClass: "fa fa-file-excel-o",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        }, {
            command: "cspfm-csv-export",
            titleKey: "EXPORT_TO_CSV",
            iconCssClass: "fa fa-download",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        }, {
            command: "cspfm-toggle-pagination",
            titleKey: "Toggle pagination",
            iconCssClass: "fa fa-bookmark",
            action: (event, callbackArgs) => {
                this.togglePagination(event, callbackArgs)
            }
        }],
    },
    autoResize: {
        containerId: this.gridContainerId,
        calculateAvailableSizeBy: 'container'
    },
    exportOptions: {
        exportWithFormatter: true
    },
    excelExportOptions: {
        exportWithFormatter: true,
    },
    headerMenu: {
        hideColumnHideCommand: true
    },
    enableTranslate: true,
    presets: {
        sorters: [{
            columnId: this.tableColumnInfo['pfm147773']['pfm147773_employeeid']['prop'],
            direction: 'ASC'
        }],
    },
    enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
    asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
    params: {
        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
    },
    checkboxSelector: {
        // you can toggle these 2 properties to show the "select all" checkbox in different location
        hideInFilterHeaderRow: false,
    },
    rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false,
    },
    enableCheckboxSelector: true,
    enableRowSelection: true,
};

列定义：

public columnDefinitions: Array<Column> = [
        {
            id: this.tableColumnInfo['pfm138993_cspfmaction']['prop'],
            nameKey: this.tableColumnInfo['pfm138993_cspfmaction']['label'],
            field: this.tableColumnInfo['pfm138993_cspfmaction']['prop'],
            minWidth: 100,
            type: FieldType.unknown,
            asyncPostRender: this.renderActionAngularComponent.bind(this),
            formatter: () => " ",
            params: {
                component: cspfmactionweb,
                angularUtilService: this.angularUtilService,
                actionInfo: this.tableColumnInfo['pfm138993_cspfmaction']['actionInfo'],
            },
            filterable: false,
            sortable: false,
            excludeFromExport: true,
            excludeFromHeaderMenu: true
        }
      ]

表列信息：

public tableColumnInfo: { [key: string]: FieldInfo } = {
        pfm138993_cspfmaction: {
            label: "Info",
            fieldName: "cspfmaction",
            prop: "cspfmaction1",
            fieldType: "ACTION",
            child: "",
            dateFormat: "",
            mappingDetails: "",
            currencyDetails: "",
            actionInfo: [
                {
                    actionIcon: "ios-information-circle-outline",
                    actionName: "Angular",
                    actionType: "cspfmaction2",
                    sourceId: "12345",
                    objectName: ""
                }
            ]
        }
      }

渲染方法：

renderActionAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
        if (colDef.params.component) {
            const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component);

            Object.assign(componentOutput.componentRef.instance,
                { selectedItem: dataContext, actionConfig: colDef.params.actionInfo });

            componentOutput.componentRef.instance.OnAction.subscribe((info) => {
                console.log("Action:", JSON.stringify(info));
            })
            setTimeout(() => $(cellNode).empty().html(componentOutput.domElement));
        }
    }

当前输出：

软件版本：

角度：7.3.5

Angular-Slickgrid：2.17.10

TypeScript：3.1.6

操作系统：Windows 10

节点：10.16.3

NPM：6.9.0