Увеличьте производительность на входе Angular2

У меня есть список компонентов, содержащих даты (отформатированные с помощью toLocaleString()) и другие вещи. Кроме того, существует компонент для создания новых компонентов, в котором содержится форма с некоторыми входными полями, построенными с угловыми формами FormBuilder. Когда я печатаю быстро, задержки проверки и текст, который я печатаю, не отображаются сразу.

Я предполагаю, что Angular выполняет рендеринг всех компонентов, потому что, если я не показываю дату в других компонентах, я могу быстро набрать без лаг.

Есть ли способ восстановить только поле ввода, которое я ввожу, поскольку все остальные компоненты не могут изменить или toLocaleString() проблема?

Ответы

Ответ 1

Есть ли способ удалить только поле ввода, которое я вводил, поскольку все остальные компоненты не могут изменить

Да, для компонентов, которые не будут меняться, установите стратегию обнаружения изменений для этих компонентов на OnPush. Компонент OnPush будет проверяться только на изменения, если

  • любое из его свойств ввода изменяется
  • он запускает событие (например, нажатие кнопки)
  • наблюдаемый (который является свойством ввода или свойством local-to-component) запускает событие, а | async используется в шаблоне с наблюдаемым (см. плункер в комментариях ниже этого ответа)
import {Component, Input, ChangeDetectionStrategy} from 'angular2/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

Также рассмотрите возможность прослушивания изменений на вашем входе, подписавшись на valueChanges Observable Angular, который доступен в вашем элементе формы, если вы используете ngFormControl. Затем вы можете использовать debounce() для обработки изменений только каждую секунду или любого подходящего временного интервала:

<input type=text [ngFormControl]="input1Control">

constructor() { 
  this.input1Control = new Control();
}
ngOnInit() {
  this.input1Control.valueChanges
    .debounceTime(1000)
    .subscribe(newValue => console.log(newValue))
}

См. fooobar.com/questions/39896/... для рабочего плунжера.