Angular中eval无法访问组件构造函数注入属性的问题求助

我完全理解你不想听“别用eval”这类建议的心情，直接给你可行的解决方案：

方案1：用Function构造函数指定执行上下文 #

比起直接调用eval，Function构造函数能更精准地控制执行时的上下文，直接把组件实例作为this传入即可：

// 在组件类的方法中
const script = 'console.log(this.sharedservice.var1)';
new Function(script).call(this); // 这里的this就是你的组件实例

脚本里的this会直接指向组件对象，自然能访问到构造函数中注入的sharedservice。

方案2：把组件实例暴露给eval的作用域 #

如果坚持要用eval（包括(0, eval)这种间接调用方式），可以先把组件实例存到一个eval能访问到的变量里：

// 在组件类的方法中
const component = this;
(0, eval)('console.log(component.sharedservice.var1)');

因为component变量在eval的外层作用域中，脚本可以直接通过它访问到组件的私有属性。

为什么之前的尝试会失败？ #

• 直接调用eval('console.log(this.sharedservice.var1)')时，Angular默认的严格模式环境会让this变成undefined，所以会报“Cannot read property 'sharedservice' of undefined”。
• 改用(0, eval)(script)后，间接调用eval会把执行上下文的this设为全局对象（浏览器中是window），但你的sharedservice是组件实例的私有属性，并不在全局对象里，因此会出现“Cannot read property 'var1' of undefined”的错误。

上面两种方案的核心都是让脚本能直接引用到你的组件实例，从而顺利访问到注入的服务。

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