Angular 5 Gridster拖拽停止调用UpdateXY报错问题求助

你遇到的问题核心是普通函数回调里的this指向不对，而且你尝试用HomeComponent.prototype访问服务的方式本身就有问题——dataService是组件实例的私有属性，只有每个组件实例上才有，类的原型对象prototype上根本不存在这个属性，所以会出现Cannot read property 'UpdateXY' of undefined的错误。

下面给你三种可行的解决方案，按推荐程度排序：

1. 使用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会捕获外层上下文的this（也就是你的HomeComponent实例），这样就能直接访问this.dataService了：

ngOnInit() {
  this.options = {
    // ...其他Gridster配置
    draggable: {
      enabled: true,
      stop: (event, $element, widget) => {
        this.widget = { x: $element.$item.x, y: $element.$item.y };
        this.dataService.UpdateXY(this.widget);
      }
    },
    // ...其他Gridster配置
  };
}

这是Angular中处理回调最常用的方式，代码简洁且不容易出错。

2. 提前保存组件实例的this到变量 #

如果因为某些限制不能用箭头函数，可以在ngOnInit里先把组件的this存到一个变量（比如that），然后在普通函数里用这个变量访问服务：

ngOnInit() {
  const that = this; // 保存组件实例的this
  this.options = {
    // ...其他Gridster配置
    draggable: {
      enabled: true,
      stop: function(event, $element, widget) {
        that.widget = { x: $element.$item.x, y: $element.$item.y };
        that.dataService.UpdateXY(that.widget);
      }
    },
    // ...其他Gridster配置
  };
}

这种方式能明确控制this的指向，适合习惯用普通函数的场景。

3. 用bind绑定this #

你也可以通过bind方法把组件的this绑定到回调函数上，让函数里的this指向组件实例：

ngOnInit() {
  this.options = {
    // ...其他Gridster配置
    draggable: {
      enabled: true,
      stop: function(event, $element, widget) {
        this.widget = { x: $element.$item.x, y: $element.$item.y };
        this.dataService.UpdateXY(this.widget);
      }.bind(this) // 绑定组件实例的this
    },
    // ...其他Gridster配置
  };
}

这种方式也能解决问题，但代码可读性不如前两种，一般推荐前两种方案。

为什么之前的方法会出错？ #

HomeComponent.prototype是类的原型对象，而dataService是通过构造函数注入到每个组件实例中的私有属性，原型对象上并没有这个属性，所以HomeComponent.prototype.dataService必然是undefined，调用它的UpdateXY方法自然会报错。

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