Angular+TypeScript项目中类方法调用时显示undefined如何解决？

这个报错的核心是importOwnSave方法执行时的this指向丢失，没有指向EditorComponent的类实例：

• 你给导航栏按钮绑定事件监听器时，如果直接将类方法作为回调传入，方法执行时的this会默认指向触发事件的DOM元素（从报错栈at HTMLButtonElement.importOwnSave也能验证这一点），自然找不到挂载在类实例上的addTransformerListeners方法。
• addRectangle方法是在Angular组件的内部上下文调用的，this默认指向组件实例，所以调用正常。

方案1：绑定事件时修正this指向 #

如果你是通过addEventListener手动绑定按钮事件，将原来的写法：

navButton.addEventListener('click', this.importOwnSave)

修改为箭头函数包裹，自动绑定类实例的this：

navButton.addEventListener('click', () => this.importOwnSave())

或者用bind手动绑定：

navButton.addEventListener('click', this.importOwnSave.bind(this))

方案2：将方法定义为箭头函数属性 #

直接修改importOwnSave的定义，将其声明为箭头函数属性，永久绑定类实例的this：

// 原来的写法
// importOwnSave(): void { ... }
// 修改为
importOwnSave = (): void => {
  // 原有逻辑不变
  var addTransformers = this.addTransformerListeners; // 此时this指向组件实例，值正常
}

方案3：使用Angular模板绑定（推荐） #

如果导航栏按钮在EditorComponent的模板内，直接用Angular的事件绑定语法，默认会绑定组件实例的this，不会出现指向问题：

<button (click)="importOwnSave()">导入配置</button>

你原有代码里const component = this的写法是为了处理普通匿名函数的this指向问题，现在可以统一替换为箭头函数简化代码：

addTransformerListeners(shape: Shape): void {
  // 不需要额外存component变量
  this.stage.on('click', (e) => {
    e.evt.preventDefault();
    // 这里的this直接指向EditorComponent实例
    if (!this.clickStartShape) {
      return;
    }
    // 原有逻辑不变
  });
}

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