Angular14升级后charts.js自动化测试__ngContext__取数失效咨询

__ngContext__本身是Angular的内部私有属性，从未对外承诺过API稳定性，框架版本迭代时可以任意修改实现逻辑。
Angular 14对生产环境的上下文存储逻辑做了优化：不再直接把完整的上下文对象引用挂载到DOM元素的__ngContext__属性上，而是只存储一个整数类型的索引ID，完整的上下文对象统一存在Angular框架初始化时创建的全局存储数组中。这个改动主要是为了减少DOM节点持有的引用大小，降低内存泄漏概率，同时压缩生产包体积。

• 优先使用Charts.js官方API获取实例，稳定性最高，不依赖框架内部实现：
  Chart.js原生提供了静态方法获取绑定在指定canvas上的图表实例，不需要绕Angular上下文：

  // 定位到图表对应的canvas元素
  const chartCanvas = document.querySelector('chart-dataset canvas');
  // 直接获取图表实例
  const chartInstance = Chart.getChart(chartCanvas);
  // 读取完整图表数据
  const chartData = chartInstance.data;
  

• 通过__ngContext__的索引ID映射回真实上下文对象：
  如果你之前的逻辑强依赖ngContext里的内容，可以通过DOM上拿到的整数ID，从Angular全局存储里捞出真实的上下文对象：

  const chartEl = document.getElementsByTagName('chart-dataset')[0];
  const ctxIndex = chartEl.__ngContext__;
  // 遍历window找到Angular的全局上下文存储数组
  const ngContextStore = Object.values(window).find(item => {
    return Array.isArray(item) && item[ctxIndex] && typeof item[ctxIndex] === 'object';
  });
  const realNgContext = ngContextStore[ctxIndex];
  // 后续按照你之前的逻辑从realNgContext中提取目标数据即可
  

• 提前拦截Charts.js构造函数捕获所有实例：
  如果页面加载时机可控，可以在页面业务代码加载前注入脚本，重写Chart构造函数，把所有初始化的图表实例缓存到自定义全局变量里，后续直接读取缓存即可，完全不受框架升级影响：

  // 该脚本需要在页面Chart.js加载完成后、业务代码初始化图表前执行
  window._chartCache = [];
  const OriginChart = window.Chart;
  window.Chart = function(...args) {
    const ins = new OriginChart(...args);
    window._chartCache.push(ins);
    return ins;
  }
  // 复制原Chart的所有静态属性/方法，避免影响原有逻辑
  Object.keys(OriginChart).forEach(key => {
    window.Chart[key] = OriginChart[key];
  });
  

注意：所有依赖Angular内部私有属性、全局未公开存储的方法都可能在后续版本升级中失效，生产环境自动化脚本优先使用第三方库官方暴露的公开API。

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