很多小的 NG-IF 与很少的 NG-IF 但里面有很多代码

Question

我的页面在元素和图像上有很多细微的变化。它们由过滤器控制，"show/hide" 个来自用户的元素。

现在，我有一个文件（组件），其中有许多 ngIf 控制这个 show/hide，这些条件最终会变成像这样的大 ifs：

*nfIf="condition1 && (!condition2 || !condition3)"

该组件将在列表中重复。所以 ngFor 将为每个组件复制这些测试。

所以就 性能而言 （忘记 DRY）在 Angular 上。如果我改变我的方法来使用更少的 IF，比如只有 5 个，但一个接一个地复制代码块。

它会运行更快吗？我正在想象浏览器检查和测试每个条件。有什么线索吗？

Answer 1

您可以考虑像这样向您的组件添加属性：

get isConditions(): boolean {
  if (condition1 && (!condition2 || !condition3)) {
    return true;
  }
  return false;
}

那么您就不需要在元素上重复完整的条件集。

Lots of little NG-IF versus Few NG-IF but with a lot of code inside