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

Question

I've been struggling with some stuff in Angular4. Please consider this Plunker: https://embed.plnkr.co/Sh4LaBtXOfxTzeL996jb/

It's a simple app which has a list of 3 items. It displays those 3 items in a subcomponent that lets the user edit the item.

I want to update the state on every keystroke (keyup). As I emit the new value, the data in the parent component (App) is updated, which causes a rerender of all the item subcomponents, which in turn causes the input field stop being focussed (as it is replaced).

That means the user can only type a single character before needing to refocus the input.

Is there any way to prevent the rerender / keep the focus on the input or a better way to set it up alltogether?

As a temporary fix for this I'm now registering what field has been changed in localStorage and on ngAfterViewInit I'm resetting the focus... which works but is ugly. I feel there should be a better way?

(In the Plunker I've setup a very simple update but in my real app I'm using firebase, subscribing to the list info which gives me the list as a whole when it emits. When that happens I set this.list to the data that's emitted, which causes the rerender.)

Thanks!

Answer 1

You could also use the ngFor track by function to prevent rerendering. When you use track by, Angular recreates DOM nodes when the specified attribute changes and only then, otherwise it reuses the DOM node and changes it.

Info about trackBy

Answer 2

you can import ChangeDetectorRef and manually disable / re-enable changes for a specific component as needed.

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

And then in the component

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

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

That can cause all sort of view wackiness though, so you may just take other commenters suggestion and worry about preventing the focus change, rather than disabling change detection altogether. You could also try setting change detection to OnPush mode, which would be less drastic.

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

and then use it in the component metadata of the top-most component you need to stop automatically propagating changes downward

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

Answer 3

UPDATE:

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

The problem is that the list item was generated each time thus the DOM was updated also, so the focus was lost.

Plunker

Old answer:

This will take care of the focus changing:

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