How to use the handsontable.hooks function in handsontable

it('should support all of the available hooks in Handsontable', async() => {
      const hooks = Handsontable.hooks.getRegistered();
      const unsupportedHooks = [
        'afterContextMenuExecute',
        'afterDropdownMenuExecute',
        'afterIsMultipleSelection'
      ];
      const template = ` unsupportedHooks.includes(hook) ?
          '' :
          `[${hook}]="prop.${hook}"`).join(' ')}>`;

      TestBed.overrideComponent(TestComponent, {
        set: {
          template: template
        }
      });
      await TestBed.compileComponents().then(() => {
        fixture = TestBed.createComponent(TestComponent);

bindSelectionEvent(callback){
        const _this=this;
        Handsontable.hooks.add("afterSelectionEnd",function(rowIndex,colIndex,row2Index,col2Index){
            callback.call(_this,rowIndex,colIndex,row2Index,col2Index);
        },this.hot);
    }
};

let newCell={
                        rowNumber:cell.rowNumber,
                        columnNumber:cell.columnNumber,
                        expand:'None',
                        value:{
                            type:'simple',
                            value:''
                        },
                        cellStyle:{fontSize:9,forecolor:'0,0,0',fontFamily:'宋体',align:'center',valign:'middle'}
                    };
                    context.addCell(newCell);
                    hot.setDataAtCell(i,j,'');
                }
            }
        }
        Handsontable.hooks.run(hot, 'afterSelectionEnd',startRow,startCol,endRow,endCol);
        hot.render();
        return removeCellsMap;
    };

context.addCell(cellDef);
        }
        cellDef.expand="Down";
        let value=cellDef.value;
        value.aggregate="group";
        value.datasetName=dataset.name;
        value.property=field.name;
        value.order='none';

        let text=value.datasetName+"."+value.aggregate+"(";
        let prop=value.property;
        text+=prop+')';
        hot.setDataAtCell(rowIndex,colIndex,text);
        setDirty();
        hot.render();
        Handsontable.hooks.run(hot, 'afterSelectionEnd',selected[0],selected[1],selected[2],selected[3]);

        undoManager.add({
            redo:function(){
                cellDef=context.getCell(rowIndex,colIndex);
                oldCellDef=Object.assign({},cellDef);
                if(cellDef.value.type!=='dataset'){
                    context.removeCell(cellDef);
                    cellDef={
                        value: {type: 'dataset', conditions: []},
                        rowNumber: cellDef.rowNumber,
                        columnNumber: cellDef.columnNumber,
                        cellStyle: cellDef.cellStyle
                    };
                    context.addCell(cellDef);
                }
                cellDef.expand="Down";

export function propFactory() {
  const settingsMapper = new SettingsMapper();
  const currentSettings = Handsontable.helper.clone(Handsontable.DefaultSettings.prototype);
  const registeredHooks = Handsontable.hooks.getRegistered();

  for (let prop in currentSettings) {
    if (currentSettings.hasOwnProperty(prop)) {
      currentSettings[prop] = {};
    }
  }

  for (let i = 0; i < registeredHooks.length; i++) {
    currentSettings[settingsMapper.addHookPrefix(registeredHooks[i])] = {};
  }

  currentSettings.root = {
    'type': String,
    'default': 'hot-' + new Date().getTime()
  };

constructor() {
    this.registeredHooks = Handsontable.hooks.getRegistered();
  }

let oldCellDef=this.context.getCell(startRow,startCol);
        let oldCellData=hot.getDataAtCell(startRow,startCol);
        let newCellDef=buildNewCellDef(startRow+1,startCol+1);
        newCellDef.value={
            type:'image',
            source:'text',
            value:''
        };
        this.context.addCell(newCellDef);
        const imagePath=window._server+'/res/ureport-asserts/icons/image.svg';
        const image=$(`<img width="20px" src="${imagePath}">`);
        let $td=$(hot.getCell(startRow,startCol));
        $td.empty();
        $td.append(image);
        setDirty();
        Handsontable.hooks.run(hot, 'afterSelectionEnd',startRow,startCol,endRow,endCol);

        const _this=this;
        undoManager.add({
            redo:function(){
                oldCellDef=_this.context.getCell(startRow,startCol);
                oldCellData=hot.getDataAtCell(startRow,startCol);
                newCellDef=buildNewCellDef(startRow+1,startCol+1);
                newCellDef.value={
                    type:'image',
                    source:'text',
                    value:''
                };
                _this.context.addCell(newCellDef);
                hot.setDataAtCell(startRow,startCol,'');
                hot.render();
                setDirty();

redo:function(){
                    oldCellData=hot.getDataAtCell(rowIndex,colIndex);
                    oldCellDataValue=cellDef.value;
                    cellDef.crossTabWidget=new CrossTabWidget(_this.context,rowIndex,colIndex,null,value);
                    hot.render();
                    setDirty();
                    Handsontable.hooks.run(hot, 'afterSelectionEnd',rowIndex,colIndex,selected[2],selected[3]);
                },
                undo:function(){

let oldValue=cellDef.value,oldCellData=hot.getDataAtCell(startRow,startCol);
            hot.setDataAtCell(startRow,startCol,'');
            let td=hot.getCell(startRow,startCol);
            let width=_this._buildWidth(startCol,td.colSpan,hot),height=_this._buildHeight(startRow,td.rowSpan,hot);
            cellDef.value={
                width,
                height,
                type:'zxing',
                category:'barcode',
                source:'text',
                format:'CODE_128',
                data:''
            };
            hot.render();
            setDirty();
            Handsontable.hooks.run(hot, 'afterSelectionEnd',startRow,startCol,endRow,endCol);
            undoManager.add({
                redo:function(){
                    cellDef=_this.context.getCell(startRow,startCol);
                    oldValue=cellDef.value,oldCellData=hot.getDataAtCell(startRow,startCol);
                    hot.setDataAtCell(startRow,startCol,'');
                    td=hot.getCell(startRow,startCol);
                    width=_this._buildWidth(startCol,td.colSpan,hot),height=_this._buildHeight(startRow,td.rowSpan,hot);
                    cellDef.value={
                        width,
                        height,
                        type:'zxing',
                        category:'barcode',
                        source:'text',
                        format:'CODE_128',
                        data:''
                    };