提高 Angular2 输入字段的性能

我有一个包含日期的组件列表（格式为toLocaleString()） 和其他东西。在它们之上有一个用于创建新组件的组件，其中包含一个表单，其中包含一些使用 Angulars FormBuilder 构建的输入字段。 当我快速输入时，验证会滞后，并且我输入的文本不会立即显示。

我假设 Angular 正在重新渲染所有组件，因为如果我不在其他组件中显示日期，我可以快速输入而不会出现延迟。

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

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

是的，对于不会改变的组件，将这些组件的变更检测策略设置为OnPush. An OnPush只有在以下情况下才会检查组件的更改：

• 它的任何输入属性发生变化
• 它触发一个事件（例如，单击按钮）
• 一个可观察的（它是一个输入属性或组件的本地属性）触发一个事件，并且| 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))
}

See https://stackoverflow.com/a/36849347/215945对于一个正在工作的笨蛋来说。