Angular ReactiveForm отображаемое значение OnPush

Question

У меня есть Angular Реактивная форма, построенная с несколькими подкомпонентами, и все они используют стратегию OnPu sh. У меня также есть простое вычисление: количество * скорость = общее;

Если общее число равно <input formControlName="total" />, то оно обновляется сразу после включения даже с OnPu sh.

Но Я хочу отобразить значение только для чтения, например:

<div class="number" >
    {{ form.controls.total.value | number }}
</div>

Действительно, это не работает с OnPu sh. Я должен использовать ChangeDetectionRef в компоненте:

  constructor(
    private cdr: ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.form.get('total').valueChanges.subscribe(data => {
      this.cdr.markForCheck();
    });
  }
}

Это работает. Я просто пытаюсь найти более элегантное и менее многословное решение, например, встроенную трубу или около того.

Спасибо

Answer 1

Так работает стратегия OnPu sh. Вместо того, чтобы проверять все дерево компонентов на предмет изменений каждый раз, когда пользователь нажимает что-либо (что-либо), он прослушивает только изменения значений привязки. Если вы изменяете не связанные значения, вы должны сказать «эй angular, я изменил не связанные значения, заново проверить дерево компонентов» - и это то, что ChangeDetectionRef сделает для вас.

Это это компромисс между перформансом и "обязательно сделай сам".