Angular 12 第三方库回调内访问类成员报TypeError如何解决

报错原因 #

这是典型的this上下文丢失问题：
当你直接将类方法onTaskCompleted作为回调参数传给第三方库时，传递的只是函数本身的引用，方法脱离了原类的执行上下文。在JavaScript/TypeScript的严格模式下，此时方法内部的this会被绑定为undefined，因此访问this.drawSomething、this.testvariable等类成员时就会抛出类型错误。
你代码中this.something.onResults(this.onResults);这行写法就是触发该问题的核心原因。

可行解决方案 #

你可以任选以下任意一种方案修复：

• 方案1：将回调方法定义为箭头函数（Angular场景最推荐）
  箭头函数会继承定义时外层作用域的this指向，不会被调用方修改上下文，无需额外绑定：

export class SomeClass {
  testvariable;

  // 改为箭头函数定义
  onTaskCompleted = (results) => {
    if (!results) {
      return;
    }
    console.log(results);
    this.drawSomething(results);
    this.testvariable = results;
  };

  constructor() {
    // 此处直接传方法引用即可
    this.something.onResults(this.onTaskCompleted);
  }

  drawSomething(results) {
    if (!results) {
      return;
    }
    // 执行逻辑
  }
}

• 方案2：传递回调时用bind绑定this
bind方法会生成一个新的函数，永久绑定this指向当前类实例：

// 传参时绑定this
this.something.onResults(this.onTaskCompleted.bind(this));

• 方案3：用匿名箭头函数包裹回调调用
  通过外层箭头函数保留类上下文，内部主动调用类方法：

this.something.onResults((res) => this.onTaskCompleted(res));

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