Angular中如何将函数返回值存入变量 解决prepareData报undefined问题

问题原因 #

该报错核心是drawChart执行时this未指向当前Angular组件实例，导致this为undefined，无法读取挂载在组件实例上的prepareData方法。
该场景通常出现在drawChart被作为回调函数传递时：比如绑定DOM事件、传入定时器、作为子组件@Output回调等，这类场景下普通函数的this会丢失原有上下文。

解决方案 #

三种通用方案任选其一即可：

方案1：箭头函数定义方法（最推荐） #

箭头函数会继承定义位置的上下文this，不会随调用场景变化：

drawChart = () => {
     var data = this.prepareData();
}

prepareData() {
    return 1;
}

方案2：手动绑定this指向 #

无需修改原方法定义，在传递回调时通过bind绑定组件实例的this即可：

// 示例：绑定DOM事件时绑定
element.addEventListener('click', this.drawChart.bind(this));

// 也可以在构造函数中提前绑定一次，全局生效
constructor() {
  this.drawChart = this.drawChart.bind(this);
}

方案3：调用层用箭头函数包裹 #

传递回调的位置用箭头函数包裹一层，确保调用时this指向组件实例：

// 示例：定时器、子组件回调场景
setTimeout(() => {
  this.drawChart();
}, 1000)

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