performance - 提高 Angular2 输入字段的性能

Question

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

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

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

score 6 · Accepted Answer

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

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

它的任何输入属性发生变化
它触发一个事件（例如，单击按钮）
一个可观察的（它是一个输入属性或本地到组件的属性）触发一个事件，并| async在模板中与可观察的一起使用（请参阅此答案下方评论中的 plunker）

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

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

如果你使用 ngFormControl ，还可以考虑通过订阅valueChangesObservable Angular 来监听你的输入的变化，使你的表单元素可用。然后，您可以使用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。

score 2 · Accepted Answer

这是一个已知问题https://github.com/angular/angular/issues/6311

也可以看看

还有一个带有建议修复的拉取请求，但似乎未包含在最新的 beta 版本中。

performance - 提高 Angular2 输入字段的性能

2 回答 2

Related

Reference