angular html 中的箭头函数
Arrow function in angular html
我想知道是否可以在 Angular
中这样的组件中使用箭头函数
<app-child [showItemCondition]="item => item.isVisible" [list]="items"></app-child>
您可以执行此操作以自定义 ChildComponent 的行为，只要回调没有对父级的引用。在这种情况下，您应该使用 @Output().
重构您的代码
但是，您不能在模板内声明函数，因此您必须将其分配给父变量并将该变量传递给子变量。该函数也应声明为经典函数（不是箭头），否则，this 将引用父函数。
不能在模板中定义任何函数。为了使其成为可能，我们需要在 JIT 编译模式下评估这些代码。
禁止使用箭头函数可以去除不必要的代码（DRY 和 KISS），结果：
- 更容易阅读
- 您不必再回到组件中查看每个函数的实际作用。
- 使用主要属于 classes 的功能的组件模板会导致难以维护的低质量代码。
如果你需要一个功能，它应该被定义为组件class方法。它可以是常规函数或箭头函数。
如果将逻辑放在模板中，则表示：
- 那个逻辑会放在不同的地方。您必须在模板和 class.
之间来回切换
- 其他程序员更难维护，因为他们不希望在 UI 中有逻辑。所以逻辑散布在不同的地方。在我看来，它打破了 SRP 等所有原则。并且很难为其他未来的开发人员维护代码
- 即使只有一行代码也会使代码更难调试
正如Guerric所说，这是不可能的，你应该定义，例如
condition=(item)=>item.isVisible
//or
condition=(item)=>{
return item.isVisible
}
condition(item){
return item.isVisible
}
并将函数作为参数传递
<app-child [showItemCondition]="condition" [list]="items"></app-child>
在你的child
@Input()showItemCondition:any
<div *ngFor="let item of items">
{{showItemCondition(item)}}
</div>
我想知道是否可以在 Angular
中这样的组件中使用箭头函数<app-child [showItemCondition]="item => item.isVisible" [list]="items"></app-child>
您可以执行此操作以自定义 ChildComponent 的行为，只要回调没有对父级的引用。在这种情况下，您应该使用 @Output().
但是，您不能在模板内声明函数，因此您必须将其分配给父变量并将该变量传递给子变量。该函数也应声明为经典函数（不是箭头），否则，this 将引用父函数。
不能在模板中定义任何函数。为了使其成为可能，我们需要在 JIT 编译模式下评估这些代码。
禁止使用箭头函数可以去除不必要的代码（DRY 和 KISS），结果：
- 更容易阅读
- 您不必再回到组件中查看每个函数的实际作用。
- 使用主要属于 classes 的功能的组件模板会导致难以维护的低质量代码。
如果你需要一个功能，它应该被定义为组件class方法。它可以是常规函数或箭头函数。
如果将逻辑放在模板中，则表示：
- 那个逻辑会放在不同的地方。您必须在模板和 class. 之间来回切换
- 其他程序员更难维护，因为他们不希望在 UI 中有逻辑。所以逻辑散布在不同的地方。在我看来，它打破了 SRP 等所有原则。并且很难为其他未来的开发人员维护代码
- 即使只有一行代码也会使代码更难调试
正如Guerric所说，这是不可能的，你应该定义，例如
condition=(item)=>item.isVisible
//or
condition=(item)=>{
return item.isVisible
}
condition(item){
return item.isVisible
}
并将函数作为参数传递
<app-child [showItemCondition]="condition" [list]="items"></app-child>
在你的child
@Input()showItemCondition:any
<div *ngFor="let item of items">
{{showItemCondition(item)}}
</div>