angular - 使用 Angular 2 评估来自服务器的表达式

Question

我正在编写一个应用程序，我需要从一个方法内部传递一个 ngIf 表达式。表达式来自后端服务作为字符串。在 Angular 1 中，我曾经在传递给 ng-if 之前使用插值来评估字符串，然后将其评估为 true 或 false，看看下面的 plunker

已更新

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

但是在 Angular 2 中，我不能对 *ngIf 使用插值，抛出异常。看下面的代码。我不希望任何行(Howdy1、Howdy2、Howdy3)在传递相同表达式时出现在 UI 上。但是只有第一个是隐藏的，没有剩下两个，其中表达式作为字符串变量传递。

我有 Angular 2 和 1.5 的插件代码。如果有人解决了类似的问题，请帮助我。

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 更改为:

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

所以它会将 bool 值返回给调用者。这实际上只是包装了您现有的 logicAsString，因此您甚至可以在 showDiv 函数中执行此操作。

而且这不使用许多人不喜欢的 eval。

希望对您有所帮助!