Angular + PIXI - 如何将组件方法分配给变量并保留 'this' 引用

Question

我正在使用 angular 7 和 Pixi.js 4.

为了从使用 PIXI.Graphics() 构建的图形元素中获得点击回调，我需要设置：

graphicElem.click = A_FUNCTION_REF

我已经将我的函数定义为我组件中的一个方法：

onClick(event: PIXI.interaction.InteractionEvent): void { console.log(this.myCompField); }

如果我写：

graphicElem.click = this.onClick;

我从控制台日志中得到：undefined。我想因为 this ref 没有通过，但事实并非如此，我可以记录 this 并且它不是未定义的。使用 this.onClick.bind(this); 可行，但我读到不建议使用 bind()。

正确的做法是什么？我错过了什么？

Answer 1

在这种情况下，您可以使用箭头函数语法代替 .bind。

试试这个：

onClick = (event: PIXI.interaction.InteractionEvent) => { console.log(this.myCompField); }

Angular + PIXI - How to assign a component method to a variable and preserve 'this' reference