Angular: Проблема с производительностью при вычислении отключения кнопки с помощью метода функции или компонента?

Question

Это хорошая / плохая практика - отключать кнопку Angular с помощью компонентного метода? В частности, будет ли это проблемой производительности в Angular? Похоже, что Angular придется постоянно вычислять.

Не лучше ли использовать переменную stati c (например, 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>

Любопытное чтение уроков и статей с использованием методов класса и т. Д. c

Answer 1

Это тот вопрос, который вам задают на собеседовании, и он может стоить вам работы, поэтому не помещайте вызов функции в шаблон.

Лучшим ответом будет использование канала

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

и использовать его

[disabled]="productsSelected | emptyArray"

Это вызовет только обнаружение изменений для повторного запуска logi c, если productsSelected изменяется.

Если вы go для Angular технических собеседований вы, вероятно, столкнетесь с подобным сценарием.

Answer 2

С тем, как вы это написали, не будет заметной разницы в производительности между нефункциональной версией и функциональной версией. Оба фрагмента кода будут выполняться одинаковое количество раз, при обнаружении изменений в любое время потребуется переоценить.

Однако вызывает беспокойство то, что подход компонентного метода не только дает вам немного больше разделения проблем. с представлением logi c и контроллером logi c, но это также увеличивает читаемость кода и дает возможность самостоятельно документировать имя функции.