Angular4：防止输入更改时重新呈现组件

Question

我一直在努力解决Angular4中的一些问题。 请考虑这个Plunker： https ：//embed.plnkr.co/Sh4LaBtXOfxTzeL996jb/

这是一个简单的应用程序，有3个项目的列表。 它显示子组件中允许用户编辑项目的这3个项目。

我想在每次击键（keyup）上更新状态。 当我发出新值时，父组件（App）中的数据会更新，这会导致所有项子组件的重新渲染，从而导致输入字段停止聚焦（因为它被替换）。

这意味着用户只能在需要重新聚焦输入之前键入单个字符。

有没有办法阻止重新投入/保持对输入的关注或更好的方式来设置它？

作为临时解决方案，我现在正在注册localStorage和ngAfterViewInit中已更改的字段我正在重置焦点......这有效但很难看。 我觉得应该有更好的方法吗？

（在Plunker我设置了一个非常简单的更新，但在我的真实应用程序中我使用firebase，订阅列表信息，它在发出时给我整个列表。当发生这种情况时，我将this.list设置为发出的数据，导致重新渲染。）

谢谢！

Answer 1

您还可以使用ngFor track by函数来防止重新渲染。 当您使用track by时，Angular会在指定的属性更改时重新创建DOM节点，然后再重新使用DOM节点并更改它。

Answer 2

您可以导入ChangeDetectorRef并根据需要手动禁用/重新启用特定组件的更改。

 import { ... other stuff... , ChangeDetectorRef } from '@angular/core'

然后在组件中

 constructor( ... other stuff... , private cdr: ChangeDetectorRef) { ... }

 ngOnInit() { 
      this.cdr.checkNoChanges();
  }

这可能导致所有类型的视图古怪，所以您可能只是采取其他评论者的建议并担心防止焦点更改，而不是完全禁用更改检测。 您也可以尝试将更改检测设置为OnPush模式，这样可以减少激烈程度。

 import { ChangeDetectionStrategy ...otherstuff } '@angular/core'

然后在最顶层组件的组件元数据中使用它，您需要停止自动向下传播更改

@Component({
   selector: 'some-name',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: ' etc..'

Answer 3

更新：

 doUpdate(data)
  {
    //no need to update the whole list, only the item will do the trick!
      this.list.items[data.id].name = data.newVal;
  }

问题是每次都生成列表项，因此DOM也被更新，因此焦点丢失了。

Plunker

老答案：

这将关注焦点的变化：

  doUpdate(data)
  {
   data.preventDefault();
    ......