用Angular 2评估服务器的表达式

Question

我正在编写一个应用程序，其中我需要从方法内传递NGIF表达式。表达式来自后端服务作为字符串。在Angular 1中，我曾经使用插值来评估字符串，然后再传递到NG-IF，然后将其评估为True或false，请查看下面的Plunker

更新

Plunker Angular 1.5https://plnkr.co/edit/ukgljvbzyqgvvrmjezjy?p=preview

但是在Angular 2中，我无法与 *ngif一起插值，引发异常。查看以下代码。我期望在UI上出现的线条（Howdy1，Howdy2，Howdy3）都不会传递相同的表达式。但是只有第一个是隐藏的，而不是剩下的两个，而表达式作为字符串变量传递。

我有针对角2和1.5的Plunker代码。如果有人解决了类似的问题，请帮助我。

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  template: `
    <h1>Angular 2 Systemjs start</h1>
    <div *ngIf="map['a']=='b' || map['b']=='a'">Howdy1</div>
    <div *ngIf="logicAsString">Howdy2</div>
    <div *ngIf="showDiv(logicAsString)">Howdy3</div>
    <p>{{logicAsString}}</p>
  `
})
export class AppComponent {
  logicAsString:string ="map['a']=='b' || map['b']=='a'";
  map = {
    a:'a',
    b:'b'
  }
  public showDiv(logic){
    return logic; 
  }
}
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

plunker Angular 2- https://plnkr.co/edit/yexzpe?p=preview

Answer 1

使用JavaScript中的新函数语法，您可以将Showdiv函数更改为：

public showDiv (logic) {
   let myfunc = new Function ('map', logic);
   let myresult:boolean = myfunc (this.map);
   return myresult;
}

，您还必须将逻辑安装更改为：

logicAsString:string = "if (map['a'] == 'c') return true; return false;"

因此，它将将布尔人归还给呼叫者。这实际上只是包装了您现有的逻辑，因此您甚至可以在ShowDiv函数中执行此操作。

这不使用许多人不喜欢的评估。

希望它有帮助！

Answer 2

javaScript中的est函数将有效地执行您上面创建的逻辑。

<div *ngIf="eval(logicAsString)">Howdy2</div>
<div *ngIf="eval(showDiv(logicAsString))">Howdy3</div>

评估是很多人不喜欢但至少有效的功能。JavaScript具有我播放的新功能语法，但找不到在这里可以找到的魔法语法，使其可以找到更可接受的。

如果我可以使新功能起作用，我也会发布该答案。

此解决方案允许您构建逻辑界定，并允许在运行时对其进行修改。这是解决方案的加号，也是从安全角度来看。

Answer 3

最好的解决方案是从服务器中输出作为RAW HTML的表达式，然后，您可以简单地做：

<div *ngIf="SERVEROUTPUT"></div> 

否则您将需要使用JavaScript本地的eval函数。