Angular组件中无法在Chart图表内调用服务函数求助

这个问题我之前碰到好多次啦，核心原因就是回调函数里的this指向不对！在ChartJS的onClick回调里，默认的this指向的是图表实例本身，而不是你的Angular组件实例，所以你自然拿不到组件里注入的服务，就会抛出Cannot read property 'updateTableData' of undefined这个错误。

下面给你三种靠谱的解决方法，按推荐程度排序：

1. 用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会直接继承外层上下文的this（也就是你的组件实例），这样就能正常访问到组件里注入的服务了。

举个组件代码的例子：

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-chart-component',
  templateUrl: './chart-component.html'
})
export class ChartComponent implements OnInit {
  // 注入你的服务
  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    const chartCtx = document.getElementById('yourChartId') as HTMLCanvasElement;
    new Chart(chartCtx, {
      type: 'bar', // 你的图表类型
      data: { /* 你的图表数据 */ },
      options: {
        // 这里用箭头函数定义onClick回调
        onClick: (event, activeElements) => {
          if (activeElements.length > 0) {
            // 拿到点击的图表元素索引（根据你的需求处理）
            const clickedIndex = activeElements[0].index;
            // 现在可以正常调用服务的函数了！
            this.dataService.updateTableData(clickedIndex);
          }
        }
      }
    });
  }
}

2. 提前保存组件的this到变量 #

如果习惯用普通函数，你可以在初始化图表前，把组件的this存到一个变量里（比如self或者componentThis），然后在回调里用这个变量访问服务：

ngOnInit(): void {
  // 保存组件实例的this
  const self = this;
  const chartCtx = document.getElementById('yourChartId') as HTMLCanvasElement;
  new Chart(chartCtx, {
    // ...其他配置
    options: {
      onClick: function(event, activeElements) {
        if (activeElements.length > 0) {
          const clickedIndex = activeElements[0].index;
          // 用self代替this访问组件的服务
          self.dataService.updateTableData(clickedIndex);
        }
      }
    }
  });
}

3. 用bind()绑定this #

你也可以用bind()方法，把组件的this绑定到回调函数上，强制让回调里的this指向组件实例：

ngOnInit(): void {
  const chartCtx = document.getElementById('yourChartId') as HTMLCanvasElement;
  new Chart(chartCtx, {
    // ...其他配置
    options: {
      onClick: function(event, activeElements) {
        if (activeElements.length > 0) {
          const clickedIndex = activeElements[0].index;
          this.dataService.updateTableData(clickedIndex);
        }
      }.bind(this) // 绑定组件的this到这个函数
    }
  });
}

这三种方法都能解决你的问题，个人最推荐第一种箭头函数的写法，代码更简洁，也不容易搞混this的指向。

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