Angular 4变量无法在jQuery函数内使用及严格模式报错求助

DevOps 小满

2026-5-22

解决Angular 4中jQuery函数无法访问组件变量及严格模式报错问题

我来帮你搞定这两个棘手的问题！先拆解下你代码里的核心问题：

问题1：严格模式下块内函数声明不被允许

Angular默认开启了严格模式，而你在自执行箭头函数的内部直接声明了OrgChart函数——严格模式不允许在块级作用域（比如函数、if语句这类块）内用function关键字声明函数，这就是你看到报错的原因。

问题2：this指向错误导致无法访问组件变量

在你写的自执行箭头函数里，this已经不再指向Angular组件的实例了，所以console.log(this.employees)自然拿不到你声明的数组。

修正后的代码方案

这里提供两种可行的解决方式，你可以根据习惯选择：

方案1：提前保存组件的this引用

employees = ["Mr. John", "Mr. Steve"];

ngOnInit() {
  // 提前保存组件实例的this引用
  const componentThis = this;

  // 用函数表达式替代函数声明，避免严格模式报错
  const OrgChart = function($container, opts) {
    // 通过保存的componentThis访问组件变量
    console.log(componentThis.employees);
  };

  // 初始化OrgChart（示例：传入jQuery选择的容器）
  OrgChart($('#org-chart-container'), {});
}

方案2：使用箭头函数保留this指向

箭头函数不会绑定自己的this，它会继承外层作用域的this，刚好能解决指向问题，同时也能避免严格模式的函数声明报错：

employees = ["Mr. John", "Mr. Steve"];

ngOnInit() {
  // 用箭头函数定义OrgChart
  const OrgChart = ($container, opts) => {
    // 这里的this直接指向Angular组件实例
    console.log(this.employees);
  };

  // 初始化OrgChart
  OrgChart($('#org-chart-container'), {});
}