Angular 10中Sortable组件update事件无法调用自定义函数问题

问题根源在于jQuery回调函数的this指向：在sortable的update回调里，默认this指向的是触发排序的DOM元素（.group-items），而不是你的Angular组件实例，所以调用this.handleSearch()找不到组件中定义的方法。

下面是三种可行的修复方案：

方案1：使用箭头函数（推荐） #

箭头函数会继承外层上下文的this，也就是你的Angular组件实例，直接替换回调函数即可：

activateSort(){     
  $(".group-items" ).sortable({
    // ... 其他配置项保持不变
    start: (e, ui) => {        
      ui.placeholder.css("visibility", "visible");
      ui.placeholder.css("background-color", "#cccccc");
      ui.placeholder.css("display", "block"); 
    },
    update: (e,ui) => {
       this.handleSearch(); // 此时this指向组件实例
    }
  }).disableSelection();
}

方案2：提前缓存组件的this #

在activateSort方法开头，把组件的this缓存到变量中，回调里使用这个变量调用方法：

activateSort(){     
  const componentThis = this; // 缓存组件实例的this
  $(".group-items" ).sortable({
    // ... 其他配置项保持不变
    start: function(e, ui) {        
      ui.placeholder.css("visibility", "visible");
      ui.placeholder.css("background-color", "#cccccc");
      ui.placeholder.css("display", "block"); 
    },
    update: function(e,ui) {
       componentThis.handleSearch(); // 使用缓存的组件实例调用方法
    }
  }).disableSelection();
}

方案3：用bind绑定上下文 #

给update回调函数绑定组件的this，强制改变其指向：

activateSort(){     
  $(".group-items" ).sortable({
    // ... 其他配置项保持不变
    start: function(e, ui) {        
      ui.placeholder.css("visibility", "visible");
      ui.placeholder.css("background-color", "#cccccc");
      ui.placeholder.css("display", "block"); 
    },
    update: function(e,ui) {
       this.handleSearch();
    }.bind(this) // 绑定组件的this到回调函数
  }).disableSelection();
}

任意选择一种方案修改后，拖拽排序触发update事件时，就能正常调用handleSearch()方法了。

内容的提问来源于stack exchange，提问作者Murugadas