无法在 Angular 中将条件作为布尔值传递

Question

我想尝试在字符串子句中传递条件，因为这些参数在目标组件中：

source.component：

export class TestComponent implements OnInit {
  condition: boolean;

  ngOnInit() {
    this.condition = !"element.id === 2";
  }
}

但是，我不能在目标组件中使用此条件：

target.component：

@Input() condition;


<button *ngIf="!condition" mat-menu-item (click)="openDialog(element)">Edit</button>

这里是这个问题的演示：

DEMO

我为什么不手动将这些参数添加到目标组件是因为；它是一个可重复使用的组件，另一个组件的条件可能不同。那么，如何从另一个组件传递条件？

看看

<button *ngIf="element.id % 2 === 0" mat-menu-item (click)="openDialog(element)">Edit</button>

我需要从另一个组件传递element.id % 2 === 0 部分而不是设置*ngIf="element.id % 2 === 0，例如条件：'element.id % 2 === 0'。然后我需要在这个组件中通过@Input 获得该选项。但我将它作为字符串接收，当我转换它时它总是返回 true :(

Answer 1

老实说，尝试将条件作为字符串传递是一种不好的方法。您应该尝试传递一个函数。

TS：

condition: (number) => boolean;

ngOnInit() {
  this.condition = id => id % 2 === 0;
}

目标的 HTML

<button *ngIf="!condition(element.id)" mat-menu-item (click)="openDialog(element)">Edit</button>

查看Stackblitz

更新：

对于多个可选条件，最好实现OnChanges

TS：

options: Options[];

ngOnInit() {

  this.options = [
    { id: 1, isTest: false },
    { id: 2, isTest: true },
    { id: 8, isTest: true }
  ];
}

目标的TS：

ngOnChanges(changes: SimpleChanges): void {
  if (changes.options) {
    this.options.forEach(option => {
      const element = this.database.find(data=>data.id === option.id);
      if (element) element.isTest = option.isTest
    })
  }
}

目标的 HTML

<button *ngIf="element.isTest" mat-menu-item (click)="openDialog(element)">Edit</button>

见Stackblitz

Answer 2

为此，您需要了解角度如何将表达式解析为字符串，

它在内部使用eval('expression as string')

我确实改变了 on init 如下

源组件：

export class TestComponent implements OnInit {
  condition: boolean;

  ngOnInit() {
    this.condition = "eval('!(element.id === 2)')";
  }
}

这是工作链接： Working Demo link

Answer 3

您可以像这样在target 组件中将您的条件作为函数传递。

目标组件：

condition: any;
ngOnInit(){
   this.condition = (id: any): boolean => {
      return id !== 2;
   }
}

在你的target.component

<button *ngIf="condition(element.id)" mat-menu-item (click)="openDialog(element)">Edit</button>

Working Stackblitz

因此，在此实现中，您将使您的代码更加安全。因为不推荐使用javascript eval，因为eval 可以执行其中的任何js 代码。所以黑客可以攻击那个区域。所以你可以实现上述解决方案。

Answer 4

你可以使用eval

export class TestComponent implements OnInit {
  condition: string;

  ngOnInit() {
    this.condition = "eval('!(element.id === 2'))";
  }
}