角度html中的箭头函数答案

【问题标题】：Arrow function in angular html角度html中的箭头函数
【发布时间】：2023-03-13 11:49:02
【问题描述】：

我想知道在 Angular 中这样的组件中是否可以使用箭头函数

<app-child [showItemCondition]="item => item.isVisible" [list]="items"></app-child>

【问题讨论】：

【解决方案1】：

正如 Guerric 所说，这是不可能的，你应该定义，例如

  condition=(item)=>item.isVisible
  //or
  condition=(item)=>{
    return item.isVisible
  }
  condition(item){
    return item.isVisible
  }

并将函数作为arg传递

<app-child [showItemCondition]="condition" [list]="items"></app-child>

在你的孩子身上

@Input()showItemCondition:any

<div *ngFor="let item of items">
  {{showItemCondition(item)}}
</div>

【讨论】：

【解决方案2】：

任何函数都不能在模板中定义。为了使它成为可能，那么我们需要在 JIT 编译模式下评估这些代码。

禁止使用箭头功能可以摆脱不必要的代码（DRY 和 KISS），结果：

如果你需要一个函数，它应该被定义为组件类方法。它可以是常规函数或箭头函数。

如果将逻辑放在模板中，则表示：

【讨论】：

你能告诉我更多关于“在 JIT 编译模式下评估那些代码”的信息吗？有链接吗？仅仅是使用 eval(...) 吗？
@YugoHarago you can read more about evaluation here in official docs
Original，是使用此功能的一个很好的例子。通常建议的解决方法是在组件中定义支持功能会降低代码的可读性。在我看来，不允许在模板中使用简单的箭头函数弊大于利。
我不同意最好避免使用箭头函数，恰恰相反，我认为简单的箭头函数会使模板和代码更简单、更干净。
@VladimirNesterovsky 但您的逻辑将放在不同的地方。您必须在模板和类之间来回切换。其他程序员更难维护，因为他们不希望 UI 中有逻辑。所以逻辑分布在不同的地方。在我看来，它违反了 SRP 等所有原则。为其他未来的开发人员维护代码真的很困难。

【解决方案3】：

您可以这样做以自定义ChildComponent 的行为，只要回调没有对父级的引用。在这种情况下，您应该使用 @Output() 重构您的代码。

但是，您不能在模板中声明函数，因此您必须将其分配给父级的变量并将该变量传递给子级。该函数还应声明为经典函数（不是箭头），否则，this 将引用父函数。

【讨论】：