Angular 12中如何在Konva.js事件回调中修改TypeScript组件变量

这个问题的核心是上下文指向错误：Konva事件回调里的this默认指向触发事件的Konva图形（比如你的box），而不是Angular组件实例，所以你访问不到组件的shapeClicked变量。下面给你几种可行的解决方案：

方案1：使用箭头函数绑定组件上下文 #

箭头函数会继承外层的this（也就是你的Angular组件实例），直接在回调里修改变量即可：

box.on('click', () => {
  // 这里的this指向组件实例，可以正常访问和修改shapeClicked
  this.shapeClicked = 'yaaay New value';
  // 如果变量变化需要同步到Konva图形的样式，记得刷新图层
  this.myLayer.draw();
});

方案2：用bind()强制绑定组件的this #

如果你想保留独立的回调方法，可以用bind()把组件的this绑定到方法上：

// 绑定事件时指定this
box.on('click', this.incrementFoo.bind(this));

// 组件方法里就能正常访问组件变量了
incrementFoo() {
  console.log('clicked: ' + this.shapeClicked); // 不再是undefined
  this.shapeClicked = 'updated value';
  this.myLayer.draw();
}

方案3：在构造函数中提前绑定方法 #

如果这个回调方法会被多次使用，可以在组件构造函数里提前绑定this，避免每次绑定事件都调用bind()：

constructor() {
  this.myLayer = new Konva.Layer();
  this.shapeClicked = 'cdf';
  // 提前把方法的this绑定到组件实例
  this.incrementFoo = this.incrementFoo.bind(this);
}

// 之后直接绑定事件即可
box.on('click', this.incrementFoo);

incrementFoo() {
  this.shapeClicked = 'new value after click';
  console.log(this.shapeClicked);
  this.myLayer.draw();
}

补充说明 #

• 如果你修改的变量关联到Angular模板的渲染，Angular的变更检测会自动更新视图；但如果变量变化需要同步到Konva图形的样式或状态，一定要调用this.myLayer.draw()来刷新图层，否则Konva不会渲染变化。
• 之前你用普通函数作为回调时，this指向的是Konva的box对象，所以this.shapeClicked自然是undefined，这是JavaScript中函数上下文的默认行为，和Angular或Konva本身无关。

内容的提问来源于stack exchange，提问作者d.braun1991