Javascript 角度：使用功能或组件方法计算按钮禁用的性能问题？

使用组件方法禁用角度按钮是好的还是坏的做法？具体来说，这是否是Angular中的性能问题？这似乎需要不断地计算

使用静态变量（例如this.productDisable:boolean）并让它在特定时间计算是否更好

isProductSaveDisabled() {
  if (this.productsSelected == null || this.productsSelected ?.length === 0) {
    return true;
  } else {
    return false;
  }

}

HTML:

<button mat-raised-button [disabled]="isProductSaveDisabled()" (click)="saveAll()">
    Save Product
</button>

保存产品

---

好奇地阅读大量使用类方法的教程和文章等

按照您的编写方式，非函数版本和函数版本之间不会有任何明显的性能差异。这两段代码将执行相同的次数，任何时候的更改检测都需要重新评估

---

但值得关注的是，组件方法方法不仅使您能够将关注点与视图逻辑和控制器逻辑进行更多的分离，但它也增加了代码的可读性，并引入了使用函数名进行自我文档编制的机会。

这是在求职面试中会被问到的问题，它可能会让你失去工作，因此不要在模板中添加函数调用

最好的答案是使用管道

@Pipe({
  name: 'emptyArray'
})
export class EmptyArrayPipe implements PipeTransform {
  transform(array: any[]): boolean {
    return !!array || array.length === 0;
  }
}

并使用它

[disabled]="productsSelected | emptyArray"

如果产品选择了更改，这将仅触发更改检测以重新运行逻辑

---

如果你参加了大量的角度技术面试，你很可能会遇到这种情况。

内联或组件方法并不重要。逻辑将执行。重要的是可读性。使用这样的组件方法比尝试将逻辑内联起来可读性强得多。组件方法还添加了自文档。执行纯逻辑与调用执行逻辑的方法之间应该没有任何明显的区别。更改检测将对这两种情况进行相同次数的评估。这是通过谷歌搜索“我应该在角度模板中放置函数调用吗？”得出的最高结果。@AdrianBrand同时作为旁注，想知道getter或setter是否也是一个好的选择？无论如何，放入管道调用，然后，不，你不把函数调用放入模板，你使用管道，但不确定你的意思。我们一直在使用这样的函数。想知道Angular是否有讨论此类场景的文档，什么是最佳的，等等？cc@TaplarI个人，这显然是我的观点，认为说你必须使用管道是过分的。当然，在某些情况下，管道是有意义的。但我非常怀疑这是最后通牒。我正在读这篇文章，想知道它与这里有什么关系？cc@taplar这是一个很好的答案。您可能需要详细说明管道的纯默认性质，这使其成为一个性能选项。