Question

目前，您可以使用用户的最终脚本。此脚本可以修改以前可用的一些变量。我在纯JavaScript中创建了一个小例子我想在角度2+ https://jsfiddle.net/hxs3d0hu/2/

中做同样的事情

提前感谢您的关注

HTML代码

    <div class="container">
      <form>
        <div class="form-group">
          <label for="descricao">Nome</label>    
          <input type="text" id="descricao" name="descricao" class="form-control" />
        </div>
        <div class="form-group">
          <label for="valor">Valor</label>
          <input type="text" id="valor" name="valor" value="10" class="form-control" />
        </div>
        <div class="form-group">
          <label for="quantidade">Quantidade</label>  
          <input type="text" id="quantidade" name="quantidade" value="20" class="form-control" />
        </div>
        <div class="form-group">
          <label for="total">Total</label>  
          <input type="text" id="total" name="total" class="form-control" />
        </div>
        <div class="form-group">
          <label for="codex">Code</label>  
          <textarea id="codex" name="codex" rows="10" cols="100" class="form-control">
          if (qtde &lt; 15) {
              vlr = 10;
          } 
          else 
          {
              vlr = 9;
          }
          tot = vlr * qtde;
          </textarea>
        </div>

        <button type="button" id="calcular" name="calcular" onclick="calcularx();" class="btn btn-primary">Calcular</button>
      </form>
    </div>

JavaScript代码

    var vlr = 0;
    var qtde = 0;
    var tot = 0;

        function calcularx(){
            var valor = document.getElementById("valor");
            var quantidade = document.getElementById("quantidade");
            var total = document.getElementById("total");

            vlr = valor.value;
            qtde = quantidade.value;
            tot = 0;

            tot = qtde * vlr;
            total.value = tot;

            var codex = document.getElementById("codex").value;
            var cst = document.getElementById("customcodescript");
            var corpo = "function custom(){ {0} }".replace("{0}", codex);
            //cst.innerHTML = corpo;
            load_js(cst, corpo);

            custom();

            valor.value = vlr;
            quantidade.value = qtde;
            total.value = tot;

            console.log(tot);
        }

       function load_js(cst, corpo)
       {
          if(cst != null){
            cst.remove();
          }
          var head= document.getElementsByTagName('head')[0];
          var script= document.createElement('script');
          script.id = "customcodescript";
          script.type= 'text/javascript';
          script.innerHTML = corpo;
          //script.src= 'source_file.js';
          head.appendChild(script);
       }

    Element.prototype.remove = function() {
        this.parentElement.removeChild(this);
    }
    NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
        for(var i = this.length - 1; i >= 0; i--) {
            if(this[i] && this[i].parentElement) {
                this[i].parentElement.removeChild(this[i]);
            }
        }
    }

Answer 1

这是一个能够实现您所需要的目标。

http://embed.plnkr.co/w2FVfKlWP72pzXIsfsCU/

使用eval创建一个函数，然后使用组件上下文调用它。组件中的所有函数和变量都可用于文本框代码：

模板值：

<label>Code:</label>
<textarea [(ngModel)]="code"></textarea> <br>

<button (click)="executeCode(code)">Do it.</button>

组件：

export class HelloWorld {

  value = 100;
  code = 'this.value = this.value * 100';

  executeCode(code){
    let fn = eval("(function(){ {0} })".replace("{0}", code));
    fn.call(this);
  }
}

但是，请记住，eval通常是邪恶的，而且这个用例非常奇怪。我不确定您的用户是否应该控制代码。无论如何，这取决于你。

另外，如果你想避免“这个”。在代码文本框中，您始终可以使用替换变量名称将其添加到场景后面。

用于更改Angular 2或更高版本中特定变量的动态脚本

1 个答案: