formularios - La vista no se actualiza en el cambio en Angular2

formularios reactivos angular 4

Question

Empecé a explorar Angular2 (vine con Angular1 y un poco de fondo React) y me quedé atascado con un problema.

Quiero vincular ciertas pulsaciones de teclas a las acciones en mi componente, por lo que he decidido usar el ciclo de vida de Angular2 para vincular / desvincular acciones.

Sin embargo, si hago algo desde dentro de una devolución de llamada de Mousetrap, funciona, pero no se procesa y un cambio no es visible hasta que se ejecuta un ciclo de resumen.

¿Necesito ejecutar algo explícitamente para actualizar una vista?

¿Podría alguien ayudarme a averiguar qué está pasando? Cualquier ayuda será muy apreciada.

import {Component} from ''angular2/core'';
const Mousetrap = require(''mousetrap'');

@Component({
  template: `<div>
    Video template: Mode {{ mode }}
    <input type="number" [(ngModel)]="mode"/>
  </div>`
})
export class Video {

  public mode: number;

  constructor() {
    this.mode = 0;
  }

  ngOnInit() {

    console.log(''hello Video component'');
    Mousetrap.bind(''d'', () => console.log(''this.mode='', this.mode));
    Mousetrap.bind(''i'', () => this.incrementMode()); // doesn''t work

    this.incrementMode(); // works
    this.incrementMode(); // works
    setTimeout(() => this.incrementMode(), 4000); // works

  }

  incrementMode() {
    console.log(''incMode'', this.mode++);
  };

  ngOnDestroy() {
    console.log(''bye bye Video component'');
    Mousetrap.unbind([''d'', ''i'']);
  }

}

Answer 1

Aunque la respuesta de @ Günter es absolutamente correcta, quiero proponer una solución diferente.

El problema con la biblioteca Mousetrap es que crea su instancia fuera de la zone angular (ver here ). Pero para activar la detección de cambios después de cada evento asíncrono, la instancia debe ser instanciada dentro de la zone angular . Tienes dos opciones para lograr esto:

1. Use inyección de dependencia:

bootstrap(App, [provide(Mousetrap, { useFactory: () => new Mousetrap() }) ]);

// ...

@Component({
  selector: ''my-app'', 
  // ...
})
export class App {
  constructor(@Inject(Mousetrap) mousetrap) {
    this.mousetrap = mousetrap;
    // ...
  }
  //...
}

2. Solo crea la instancia de la Mousetrap dentro del constructor:

@Component({
  selector: ''my-app'', 
  // ...
})
export class App {
  constructor() {
    this.mousetrap = new Mousetrap();
    // ...
  }
  //...
}

En ambos casos, tendrá la posibilidad de utilizar la instancia de la ratonera de esta manera:

ngOnInit() {
  this.mousetrap.bind(''i'', () => this.incrementMode()); // It works now!!!
  // ...
}

Ahora no necesita usar ngZone.run() en cada llamada de bind . En caso de inyección de dependencia, también puede utilizar esta instancia de mousetrap en cualquier componente / servicio de su aplicación (no solo en el componente de la App ).

Vea este plunk . Yo uso la inyección de dependencia allí.

Answer 2

Si MouseTrap está fuera de Angular, es posible que necesite inyectar NgZone y ejecutar su código como

  Mousetrap.bind(''i'', () => this.ngZone.run(() => this.incrementMode()));