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

Question

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

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

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

Answer 1

Это известная проблема https://github.com/angular/angular/issues/6311

Смотрите также

• https://github.com/angular/angular/issues/5808
• https://github.com/angular/angular/issues/7822
• https://github.com/angular/angular/issues/7971

Существует также pull request с предложенным исправлением, но, кажется, не быть включенным в последней бета-версии.

Answer 2

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

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

• любой из его входных свойств изменяется
• это пожары событие (например, нажатие кнопки)
• наблюдаемым (что является свойством ввода или локально-на-свойства компонента) выстреливает событие, и | async используется в шаблоне с наблюдаемой (см plunker в комментариях ниже этого ответа)

import {Component, Input, ChangeDetectionStrategy} from 'angular2/core'; 

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

---

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

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

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

См https://stackoverflow.com/a/36849347/215945 для рабочего plunker.