Angular：使用函数或组件方法计算按钮禁用的性能问题？

Question

使用组件方法禁用 Angular 按钮是否 good/bad 实践？具体来说，这会是 Angular 中的性能问题吗？好像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>

使用class方法等好奇地阅读教程和文章的战利品

Answer 1

按照您编写的方式，non-function 版本和函数版本之间不会有任何明显的性能差异。两段代码将执行相同的次数，任何时候变化检测都需要 re-evaluate.

但令人担忧的是，组件方法方法不仅让您将视图逻辑和控制器逻辑的关注点更多地分离，而且还增加了代码的可读性并为自己引入了机会带有函数名称的文档。

Answer 2

这是您在求职面试中会被问到的那种问题，它可能会让您丢掉工作，所以不要在模板中放置函数调用。

最好的答案是使用管道

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

并使用它

[disabled]="productsSelected | emptyArray"

如果 productsSelected 发生变化，这只会触发变化检测以重新运行逻辑。

如果你经常参加 Angular 技术面试，你很可能会遇到这种情况。

Angular：使用函数或组件方法计算按钮禁用的性能问题？

Angular: Performance issue to calculate Button Disable with Function or Component Method?

javascript

typescript

angular

angular-reactive-forms

angular10