Angular 模板条件性能答案

【问题标题】：Angular template conditions performanceAngular 模板条件性能
【发布时间】：2022-12-14 11:41:08
【问题描述】：

我正在使用最新的角度，最近对模板条件和性能有一些疑问。我知道在模板中调用方法是不好的做法，它在每个更改检测周期都会被调用，但我不确定其他 2 个解决方案。

 1) <div *ngIf="isConditionsTrue"></div>
 2) <div *ngIf="isConditionsTrueFunction()"></div>
 3) <div *ngIf="condition1 || condition2 && !condition3"></div>

在 ts 文件中：

ngOnInit(): void {
   this.isConditionsTrue = this.condition1 || this.condition2 && !this.condition3;
}

isConditionsTrueFunction(): boolean {
   return this.condition1 || this.condition2 && !this.condition3;
}

我们讨论的最佳选择是什么：

a) 可读性.我猜 1 是赢家。

b) 性能我很好奇 2 和 3 之间。angular 是否有一些像纯管道中的缓存机制，并且不会每次都在模板中计算条件，或者 2 和 3 是相同的？

c) 架构我知道 2 是不好的做法。由于我们在组件模板中使用表达式，所以 3 是否被视为不良做法？

【问题讨论】：

标签： javascript angular

【解决方案1】：

没有关于“我知道 2 是不好的做法”的官方角度文档，我很乐意看到有人证明这是错误的！！！

推理：

切勿使用数组方法或繁重的计算方法，即使它是内联的或在函数内部也是如此。几个例子是数组方法、find、some、filter 等。NgIf 方法应该总是非常基本的（只是简单的变量 AND OR 检查），因为每次运行变化检测时都会触发它们

当条件太大时（比如 5 和条件链接在一起）去寻找一个功能（在可读性和单元测试以及文档方面）

当条件很简单时，在 HTML 中使用内联条件，因为为它单独编写一个函数太浪费了！

【讨论】：