Использование геттеров в Angular шаблонных компонентах?

Question

Предположим, у нас есть геттер, определенный следующим образом:

  get sku() {
    return this.form.get('sku').value
  }

И мы используем его так:

    <mat-hint *ngIf="!sku">Example sku123</mat-hint>

Есть ли лучший способ сделать это из Angular Изменить перспективу производительности обнаружения?

Мы могли бы использовать Observable. Примерно так, я думаю (в общих чертах):

sku$ = this.form.get('sku').valueChanges().pipe(untilDestroyed(this))

<mat-hint *ngIf="!(sku|async)">Example sku123</mat-hint>

Один лучше другого?

IIU C геттер будет вызываться всякий раз, когда обнаруживается изменение , но если мы используем ChangeDetectionStrategy.OnPush с Observable, тогда будут получать уведомления только при обновлении формы?

Answer 1

с использованием ChangeDetectionStrategy.OnPush не будет применять изменение к вашему sku в представлении * ngIf, потому что автоматическое c обнаружение изменений отключено. Только событие будет запущено без изменения вида. Следовательно, вам придется явно вызывать его, используя

constructor(private cdRef: ChangeDetectorRef) {}

this.form.valueChanges
    .subscribe(() => {
      this.cdRef.markForCheck();
    });
  }

<mat-hint *ngIf="!sku">Example sku123</mat-hint>

Примечание. Производительность будет увеличена при использовании ChangeDetectionStrategy.OnPush, поскольку цикл запускается только один раз. Но будет сложно, когда речь заходит о реактивных формах. А также все дочерние компоненты внутри родительского компонента, использующие ChangeDetectionStrategy.OnPush, будут наследоваться, и вам придется вызывать их вручную, если это необходимо.

Answer 2

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