Angular 8中Gridster 2的EmptyCellClickCallback无法访问组件对象

这个问题的核心是JavaScript的this上下文绑定问题：当你直接把this.emptyCellClick赋值给Gridster2的emptyCellClickCallback时，这个方法的执行上下文已经不再是你的Angular组件实例了，而是变成了调用它的Gridster对象，所以自然找不到组件里的add()方法和注入的服务。

下面是几种可靠的解决办法：

方法1：用箭头函数包裹回调 #

直接在配置里用箭头函数来包裹你的回调方法，箭头函数会自动捕获当前组件的this上下文：

this.options = { 
  enableEmptyCellClick: true, 
  emptyCellClickCallback: (event: MouseEvent, item: GridsterItem) => this.emptyCellClick(event, item), 
}

add(){ 
  // 业务逻辑
}

emptyCellClick(event: MouseEvent, item: GridsterItem): void { 
  this.add() 
}

方法2：在构造函数中绑定this #

在组件的构造函数里，手动把emptyCellClick方法的this绑定到组件实例：

constructor(private yourService: YourInjectedService) {
  // 绑定this到组件实例
  this.emptyCellClick = this.emptyCellClick.bind(this);
}

this.options = { 
  enableEmptyCellClick: true, 
  emptyCellClickCallback: this.emptyCellClick, 
}

add(){ 
  // 业务逻辑
}

emptyCellClick(event: MouseEvent, item: GridsterItem): void { 
  this.add();
  this.yourService.doSomething(); // 现在可以正常访问注入的服务了
}

方法3：把回调方法定义为箭头函数 #

直接把emptyCellClick定义成类的箭头函数属性，这样它的this会永久绑定到组件实例：

this.options = { 
  enableEmptyCellClick: true, 
  emptyCellClickCallback: this.emptyCellClick, 
}

add(){ 
  // 业务逻辑
}

// 用箭头函数定义方法，固定this指向组件
emptyCellClick = (event: MouseEvent, item: GridsterItem): void => { 
  this.add();
  this.yourInjectedService.someMethod(); // 正常访问服务
}

这三种方法都能解决你的问题，选哪种看个人习惯，我通常推荐方法3或者方法2，代码更简洁直观。

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