如何将AngularJS的$eval方法改写为Angular2实现？

内置实现方式 #

Angular 没有直接对应 $rootScope.$eval 的原生 API，但可以通过两种原生方式实现类似功能：

• 原生 eval() 结合组件上下文
  仅在表达式完全可信（无XSS风险）的场景下使用，把参数绑定到组件实例后执行表达式：

  // 组件类内实现
  evaluateExpression(expression: string, params: Record<string, any>) {
    Object.assign(this, params);
    return eval(expression);
  }
  

• 利用 Angular 模板 API 执行表达式
  贴合 Angular 模板语法，安全性更高，适合复杂场景：

  import { Component, Injector, ViewContainerRef, Compiler } from '@angular/core';
  
  constructor(
    private injector: Injector,
    private vcr: ViewContainerRef,
    private compiler: Compiler
  ) {}
  
  evaluateTemplateExpression(expression: string, params: Record<string, any>) {
    // 创建动态模板组件
    const dynamicComponent = Component({ template: `{{ ${expression} }}` })('TempComponent');
    const module = this.compiler.compileModuleSync({ declarations: [dynamicComponent] });
    const factory = this.compiler.compileComponentSync(dynamicComponent);
  
    // 注入参数
    const paramInjector = Injector.create({
      parent: this.injector,
      providers: Object.entries(params).map(([key, val]) => ({ provide: key, useValue: val }))
    });
  
    // 渲染模板并获取结果
    const view = this.vcr.createComponent(factory, { injector: paramInjector });
    const result = view.location.nativeElement.textContent;
    view.destroy();
    return result;
  }
  

第三方 npm 包替代 #

如果不想手动实现，可选用成熟的第三方库：

• angular-eval：专为 Angular 设计，支持模板语法，用法接近 $eval：

  import { AngularEval } from 'angular-eval';
  
  constructor(private angularEval: AngularEval) {}
  
  getExpressionResult() {
    return this.angularEval.eval(expressionToInterpolate, allowedSetOfParameters);
  }
  

• expr-eval：通用表达式求值库，支持标准 JS 表达式，适配性强：

  import { Parser } from 'expr-eval';
  
  const parser = new Parser();
  const result = parser.evaluate(expressionToInterpolate, allowedSetOfParameters);
  

注意：无论采用哪种方案，都要确保表达式来源可信，避免执行恶意代码引发安全问题。

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