提高Angular2输入字段的性能

Question

我有一个包含日期(格式化toLocaleString())和其他东西的组件列表.在它们之上有一个用于创建新组件的组件,其中包含一个带有一些使用角色形状构建器构建的输入字段的表单.当我快速键入时,验证滞后并且我正在键入的文本不会立即显示.

我假设Angular正在重新渲染所有组件,因为如果我不在其他组件中显示日期,我可以快速键入而不会有滞后.

有没有办法只重新输入我输入的输入字段,因为所有其他组件都无法更改或是toLocaleString()问题？

Answer 1

有没有办法只重新输入我输入的输入字段,因为所有其他组件都无法更改

是的,对于不会更改的组件,请将这些组件的更改检测策略设置为OnPush.一个OnPush组件将仅被检查的变化,如果

• 它的任何输入属性都会改变
• 它会触发事件(例如,单击按钮)
• 一个observable(它是一个输入属性或一个local-to-the-component属性)触发一个事件,并| async在带有observable的模板中使用(参见下面评论中的plunker)

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

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

valueChanges如果使用ngFormControl,还可以考虑通过订阅表单元素上的Observable Angular 来监听输入的更改.然后,您可以使用debounce()每秒仅处理更改或适当的时间范围:

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

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

有关工作的plunker,请参阅/sf/answers/2579454321/.