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
})

如果使用ngFormControl，还可以考虑通过订阅表单元素上的valueChanges Observable 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了解有效工作人员。

Answer 2

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

另见

还有一个pull request有一个建议修复，但似乎没有包含在最新的测试版中。

提高Angular2输入字段的性能

2 个答案: