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

Question

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

更新

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

但是在 Angular 2 中，我不能使用带有 *ngIf 的插值，抛出异常。看看下面的代码。我期望没有一行（Howdy1、Howdy2、Howdy3）出现在 UI 上，因为它传递了相同的表达式。但是只有第一个被隐藏而不是剩下的两个，其中表达式作为字符串变量传递。

我有 Angular 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 更改为：

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

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

而且这并没有使用很多人不喜欢的 eval。

希望对你有帮助！

Answer 2

最好的解决方案是将表达式作为原始 HTML 从服务器输出， 那么你可以简单地做：

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

或者您将需要使用 JavaScript 原生的 eval function。

Answer 3

JavaScript 中的 eval 函数将用于执行您在上面创建的 logicAsString。

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

Eval 是一个很多人不喜欢但至少有效的函数。 JavaScript 有一种新的 Function 语法，我曾使用过它，但找不到让它在此处正常工作的神奇语法，您可能会发现它更容易接受。

如果我可以使新功能正常工作，我也会发布该答案。

此解决方案允许您根据需要构建 logicAsString，并允许在运行时对其进行修改。这是解决方案的一个优点，但从安全角度来看也是一个缺点。